在滾動位置之間觸發的jquery動畫

Question

我想使用jquery的.animate在兩點之間淡化一個元素，並在滾動位置不在它們之間時淡出它。這裏是我的代碼，它不工作：

$(window).scroll(function(){ 
var top = $(this).scrollTop(); 
if(top > 50 && top < 200){ 
    $('#videosection').animate({opacity:'1'}); 
} 
if(top < 50 && top > 200){ 
    $('#videosection').animate({opacity:'1'}); 
} 
}); 

Answer 1

如果（上 &頂部> 200）{

此代碼不會有任何效果。這是不可能的同時少於50和200以上 - 在這個宇宙中沒有這樣的數字:)。這就是爲什麼Doa的代碼不起作用。

試試這個代碼：

var isCurrentlyVisible = false; 
$(window).scroll(function(){ 
    var top = $(this).scrollTop(); 
    if(!isCurrentlyVisible && top > 50 && top < 200){ 
     isCurrentlyVisible = true; 
     $('#videosection').stop().animate({ 
      "opacity":"1" 
     }); 
    } 
    if(isCurrentlyVisible && (top < 50 || top > 200)){ 
     isCurrentlyVisible = false; 
     $('#videosection').stop().animate({ 
      "opacity":"0" 
     }); 
    } 
}).trigger('scroll'); 

上jsFiddle.net