jQuery – frollOut on Scroll / fadeIn on“scrollstop”

我有一个div定位工作，它被滚动事件触发。 滚动事件多次被触发会导致闪烁的div，会发生什么。 我的计划是在没有更多滚动事件被触发时淡出该div并重新开始。 如何检查滚动结束？ 我想到了超时滚动的组合，但实际上并没有像我希望的那样有效。 这是我到目前为止所得到的。

$(document).ready(function(){ //var animActive = false; $(window).scroll(function() { /* if (animActive == false){ animActive = true; $('.mceExternalToolbar').fadeOut(100, function () { $('.mceExternalToolbar').fadeIn(3000, function () { animActive = false; console.log("NOW"); }); }); } */ topParentx = $('#tinyMCEwrapper').position().top; if ($(this).scrollTop() >= topParentx){ $('.mceExternalToolbar').css('top', ($(this).scrollTop()-topParentx) + "px"); } else { $('.mceExternalToolbar').css('top', "0px"); }; }); }); 

正如你所看到的那样，我离开了我最后一次尝试，但是fade-function的回调没有按预期工作。

Answer 1

不幸的是，没有滚动停止的概念，所以你无法真正触发动画。 可能更好的方法是为div的’top’属性设置动画，使其平滑地滑动到它的新位置而不是闪烁。

  topParentx = $('#tinyMCEwrapper').position().top; var topTarget = "0px"; if ($(this).scrollTop() >= topParentx){ topTarget = ($(this).scrollTop()-topParentx) + "px"; } $('.mceExternalToolbar').stop().animate({top, topTarget}, 500); 

Answer 2

您可以使用jQuery特殊事件来创建scrollstop事件。 James Padolsey写了一个关于scrollstop事件的好例子 。

Answer 3

修复滚动不脉冲！ 的setTimeout

 var animActive = false; $(window).scroll(function(){ if (animActive == false){ animActive = true; $('#target').fadeOut(100, function () { var scrl = setTimeout( function(){ animActive = false; $('#target').fadeIn(500); }, 2000); }); } }); 

Answer 4

好吧，虽然我昨天很开心……今天现实回击…… SAFARI的回应是没有重新渲染移动div后面的所有必要碎片。 特别是在tinyMCE的iframe上。 所以我最终得到了以下内容，这非常有效。 淡出div – >动画到位置 – >仅在回调被触发时淡入。

 $(document).ready(function(){ $(window).scroll(function() { topParentx = $('#tinyMCEwrapper').position().top; var topTarget = "0px"; if ($(this).scrollTop() >= topParentx){ topTarget = ($(this).scrollTop()-topParentx) + "px"; $('.mceExternalToolbar').animate({opacity: 0}, 1); } $('.mceExternalToolbar').stop().animate({top: topTarget}, 200, 'swing', function(){ $('.mceExternalToolbar').animate({opacity: 1}, 100, 'swing'); }); }); });