-1

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

那行得通，代码：

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');

（在toggleClass之后）

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);
            }   
        });
    });

但是如果我而不是fadeIn put toggle它会动画变化但方向不好（img出现然后切换到消失）谢谢

4

2 回答 2

2

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

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

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

这是证明它有效的证据http://jsfiddle.net/6d8cf/

于 2012-04-12T00:11:02.063 回答
0

似乎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);
            }   
        });
    });
于 2012-04-14T16:20:09.480 回答