Fadeout動畫發生的時間比預期晚

我想在滾動時更改元素的不透明度，然後在滾動停止後將其更改回去。這是我的代碼：Fadeout動畫發生的時間比預期晚

$(window).scroll(function() { 
    $(".BGlogoCircle").fadeTo("fast", 1); 
    console.log("scrolled"); 
    clearTimeout($.data(this, 'scrollTimer')); 
    $.data(this, 'scrollTimer', setTimeout(function() { 
     $(".BGlogoCircle").fadeTo("fast", 0.5); 
     console.log("stopped"); 
    }, 250)); 
});

它僅半作品，第一部分工作正常：我滾動，元素淡入和console.log('scrolled')火災。

只要我停止滾動，console.log("stopped")就會發生，但是這個元素只會在晚些時候消失（大約5秒左右，我估計）。

我的錯誤在哪裏，我該如何解決這個問題？

來源

2016-07-15 BorisG

通過添加剩餘的代碼來創建小提琴。 – frnt

你排隊了很多fadeTo動畫與此：

$(".BGlogoCircle").fadeTo("fast", 1);

在jQuery使所有推出的動畫（在相同的元素），在隊列和對待他們，只有當先前排隊的動畫完成後，它會當所有以前的動畫完成後，只能看到0.5動畫。這可能會有很多，因爲scroll事件會在典型的滾動操作期間重複觸發。

你最好stop以往任何一次，啓動未來之前，讓動畫隊列爲空：

$(".BGlogoCircle").stop().fadeTo("fast", 1);

這解決了問題，但我會建議做同樣的與其他呼叫fadeTo：

$(window).scroll(function() { 
    $(".BGlogoCircle").stop().fadeTo("fast", 1); 
    console.log("scrolled"); 
    clearTimeout($.data(this, 'scrollTimer')); 
    $.data(this, 'scrollTimer', setTimeout(function() { 
     $(".BGlogoCircle").stop().fadeTo("fast", 0.5); 
     console.log("stopped"); 
    }, 250)); 
});

來源

2016-07-15 07:44:59 trincot

試試這個：

$(window).scroll(function() { 
 
    $(".BGlogoCircle").fadeIn("slow"); 
 
    clearTimeout($.data(this, 'scrollTimer')); 
 
    $.data(this, 'scrollTimer', setTimeout(function() { 
 
    // do something 
 
    $(".BGlogoCircle").fadeOut("slow"); 
 
    }, 250)); 
 
});

.cool { 
 
    height: 1000px; 
 
} 
 
.BGlogoCircle { 
 
    background: #333333; 
 
    position: fixed; 
 
    width: 100%; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<body> 
 
    <div class="cool"> 
 
    <div class="BGlogoCircle">Test</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-07-15 08:02:32 floooat

Fadeout動畫發生的時間比預期晚

回答

相關問題