jQuery - 淡入淡出滾動/淡入淡出「scrollstop」

Question

我有一個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"); 
     }; 
    }); 

}); 

正如你可以看到我離開了我在那裏最後的嘗試之一，但淡入功能的回調沒有按預期工作。

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

好而今天，我很高興昨天......現實中風回來...... 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'); 

     }); 

    }); 

}); 

Answer 3

您可以使用jQuery特殊事件創建scrollstop事件。詹姆斯帕多爾寫了一個偉大的example of scrollstop event。

Answer 4

修復不滾動滾動！ 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); 
     }); 
    } 
});