jQuery 切换带有方向和动画的类

jQuery toggleClass with direction and animation

本文关键字：动画 方向 jQuery      更新时间：2023-09-26

我按照教程在滚动后向我的网站添加一个固定标题，并且网站的徽标出现在固定部分。

有效，代码：

var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
nav_container.waypoint({
    handler: function(event, direction) {
        nav.toggleClass('sticky', direction=='down');
        logo.toggleClass('logo_sticky', direction=='down');
        if (direction == 'down')
            nav_container.css({ 'height' : nav.outerHeight() });
        else
            nav_container.css({ 'height' : 'auto' });
    });
});

如何在徽标中添加淡入延迟，使其不会突然出现？

我尝试过的版本：

logo.toggleClass('logo_sticky', direction=='down').delay(500).fadeIn('slow');
logo.delay(500).toggleClass('logo_sticky', direction=='down').fadeIn('slow');

（在切换类之前）

logo.delay(500).fadeIn('slow')
logo.toggleClass('logo_sticky', direction=='down');

（在切换类之后）

logo.toggleClass('logo_sticky', direction=='down');
logo.delay(500).fadeIn('slow')

老实说，我已经尝试了我想到的每一个组合，哈哈我正在尝试的新版本也不起作用：

$(function() {
        var nav_container = $(".nav-container");
        var nav = $("nav");
        var logo = $("logo");
        $.waypoints.settings.scrollThrottle = 30;
        nav_container.waypoint({
            handler: function(event, direction) {
                if (direction == 'down'){
                    nav_container.css({ 'height':nav.outerHeight() });
                    nav.addClass('sticky', direction=='down').stop();
                    logo.css({"visibility":"visible"}).fadeIn("slow");
                }
                else{
                    nav_container.css({ 'height':'auto' });
                    nav.removeClass('sticky', direction=='down').stop();
                    logo.css({"visibility":"hidden"});
                }
                },
            offset: function() {
                return (0);
            }   
        });
    });

但是如果我不是淡入淡出放置切换，它会动画更改，但方向不好（img 出现，然后切换消失）谢谢

http://api.jquery.com/delay/

http://api.jquery.com/fadein/

使用$(yourLogoSelector).delay(delayAmount).fadeIn();

这是它工作的证据 http://jsfiddle.net/6d8cf/

似乎

fadeIn 仅在您没有 css 时才有效 属性可见性：隐藏，但显示：无...

您可以执行element.hide();，然后element.fadeIn().由于hide（）改变了页面的布局，因为它消除了其中的项目，这是我遇到的解决方案：

    $(function() {
  // Do our DOM lookups beforehand
        var nav_container = $(".nav-container");
        var nav = $("nav");
        var logo = $("logo");
        $.waypoints.settings.scrollThrottle = 30;
        nav_container.waypoint({
            handler: function(event, direction) {
                if (direction == 'down'){
                    nav_container.css({ 'height':nav.outerHeight() });
                    nav.addClass('sticky', direction=='down').stop();
                    logo.css('opacity',0).animate({opacity:1}, 1000);
                }
                else{
                    nav_container.css({ 'height':'auto' });
                    nav.removeClass('sticky', direction=='down').stop();
                    logo.css('opacity',1).animate({opacity:0}, 1000);
                }
                },
            offset: function() {
                return (0);
            }   
        });
    });
相关文章：