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

(toggleClass の前)

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 の代わりにトグルを配置すると、変更がアニメ化されますが、悪い方向になります (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

CSS のプロパティ visibility: hidden がない場合にのみ、fadeIn が機能するようですが、display:none...

を実行でき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 に答える