【问题标题】:Why jQuery fadeTo() doesn't work on scroll()?为什么 jQuery fadeTo() 在 scroll() 上不起作用?
【发布时间】:2012-05-14 09:58:25
【问题描述】:

我不知道为什么这段代码不起作用:

$(window).scroll(function () {
    var $scrtop = $(window).scrollTop(),
    $topnavbar = $(".topbar,.navbar-fixed-top");

    $topnavbar.mouseenter(function(){
        $topnavbar.stop(true,true).fadeTo(4000,1);
    }).mouseleave(function(){
        $topnavbar.stop(true,true).fadeTo(4000,.5);
    })
    if( $scrtop > 100 )
    {
        $topnavbar.stop(true,true).fadeTo(4000,.5);
    } else {
        $topnavbar.stop(true,true).fadeTo(4000,1);
    }

});//scroll

它只是直接进入最终的不透明度,没有fadeTo() 的阶段。 在 jsfiddle 中:http://jsfiddle.net/pPr9S/

【问题讨论】:

    标签: jquery scroll scrolltop fadeto


    【解决方案1】:

    更新了代码

    你要从 stop 中移除第二个 true,因为它实际上完成了队列中的下一个动画;

    var $topnavbar = $(".topbar,.navbar-fixed-top"),  
        $scrtop;  
     $(window).scroll(function () {
    $scrtop = $(window).scrollTop();
    if( $scrtop > 100 )
    {
        $topnavbar.stop(true).fadeTo(500,.5);
    } else {
        $topnavbar.stop(true).fadeTo(500,1);
    }
    });
    
    $topnavbar.hover(function(){
    $topnavbar.stop(true).fadeTo(500,1);
    }, function(){
        $topnavbar.stop(true).fadeTo(500,.5);
    });
    

    【讨论】:

    • 这里在 jsfiddle:jsfiddle.net/pPr9S
    • 淡入淡出仍然不起作用。我没有直接到 0.5 不透明度或 1 不透明度的过渡。
    【解决方案2】:

    我不知道你的问题是什么,试试这个,如果没有,请在jshttp://jsfiddle.net/上插入html代码,这样你会很快得到答案...

    var $topnavbar = $(".topbar,.navbar-fixed-top"),
        $scrtop; $(window).scroll(function () {
        $scrtop = $(window).scrollTop();
        if( $scrtop > 100 )
        {
            $topnavbar.stop().fadeTo(4000,.5);
        } else {
            $topnavbar.stop().fadeTo(4000,1);
        } });
    
    $topnavbar.hover(function(){
        $topnavbar.stop().fadeTo(4000,1); }, function(){
        $topnavbar.stop().fadeTo(4000,.5); });
    

    【讨论】:

    • 谢谢,但没有区别。不透明度在有或没有单引号或双引号的情况下都有效。不起作用的是褪色。
    猜你喜欢
    • 1970-01-01
    • 2012-07-08
    • 2017-09-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多