通過滾動動畫PNG序列

Question

基本上，我想根據滾動位置動態地添加/刪除類.show到.container內部的圖像。我想在某個位置後改變班級。

$(document).ready(function() { 
 
    var container = $('#container'), 
 
    nImg = 0; // active picture 
 
    imgNum = $('#container img').length; 
 
    var topDiv = (container).offset() || { 
 
    "top": NaN 
 
    }).top; 
 

 
$(window).bind('scroll', function() { 
 
    var y = $(this).scrollTop(); 
 
    if (y > topDiv) { 
 
    nImg++; 
 
    } else { 
 
    nImg--; 
 
    } 
 
    if (nImg >= imgNum) { 
 
    nImg = 0; 
 
    } 
 
    if (nImg < 0) { 
 
    nImg = imgNum - 1; 
 
    } 
 

 
    $(".animated").each(function() { 
 
    $(this).removeClass("show") 
 
    }); 
 
    $(".animated").eq(nImg).addClass("show"); 
 
}); 
 
});

.animated { 
 
    display: none; 
 
} 
 
.show { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="height:200px"></div> 
 
<div id="container"> 
 
    <img src="http://i.imgur.com/2oVbl7z.png" class="animated show" /> 
 
    <img src="http://i.imgur.com/S5s0Mv1.png" class="animated" /> 
 
    <img src="http://i.imgur.com/0vBEXL7.png" class="animated" /> 
 
    <img src="http://i.imgur.com/ffg7v9n.png" class="animated" /> 
 
    <img src="http://i.imgur.com/9FD5kdE.png" class="animated" /> 
 
</div>

如果滾動慢慢的你看到它的實際工作，但過多的快 - 這就是問題所在。我只是想緩慢移動，並想在某個位置後開始。

Answer 1

查看this jsFiddle查看如何限制其更改頻率的示例。

function animationTimer(){ 
    canChange = true; 
} 

$(window).bind('scroll', function() { 
    if(canChange) 
    { 
     canChange = false; 
     setTimeout(animationTimer, 250); 
     // ... 
    } 
}); 

這將使圖像改變每250毫秒，所以更改250多項適合你掐死，其中它的變化速度。

Answer 2

您可以使用sleep function（setTimeout）在兩次操作之間等待一段時間。並且要確保不會執行超過1次，您可以使用信號量至lock關鍵區域。

在下面的例子中，我添加和刪除一個類（這是信號量）。我利用setTimeout等待一段時間來執行該代碼。

$(document).ready(function() { 
 
    var container = $('#container'), 
 
    nImg = 0; // active picture 
 
    imgNum = $('#container img').length; 
 
    var topDiv = ((container).offset() || { "top": NaN }).top; 
 

 
$(window).bind('scroll', function() { 
 
    if(!container.hasClass('lock')) { 
 
\t \t container.addClass('lock'); 
 
     setTimeout(function() { 
 
\t \t var y = $(this).scrollTop();   
 
\t \t if(y>topDiv){ 
 
\t \t \t nImg++; 
 
\t \t }else{ 
 
\t \t \t nImg--; 
 
\t \t } 
 
\t \t if(nImg>=imgNum){ nImg = 0; } 
 
\t \t if(nImg<0){ nImg = imgNum-1; } 
 

 
\t \t $(".animated").each(function(){ 
 
\t \t \t $(this).removeClass("show")    
 
\t \t }); 
 
\t \t $(".animated").eq(nImg).addClass("show"); 
 
\t \t 
 
\t \t container.removeClass('lock'); 
 
     },200); 
 
    } 
 
}); 
 
});

.animated { display: none;} 
 
.show { display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="height:200px"></div> 
 
<div id="container"> 
 
    <img src="http://i.imgur.com/2oVbl7z.png" class="animated show" /> 
 
    <img src="http://i.imgur.com/S5s0Mv1.png" class="animated" /> 
 
    <img src="http://i.imgur.com/0vBEXL7.png" class="animated" /> 
 
    <img src="http://i.imgur.com/ffg7v9n.png" class="animated" /> 
 
    <img src="http://i.imgur.com/9FD5kdE.png" class="animated" /> 
 
</div>

注：您可以更改的setTimeout值以符合您的需求速度。