模擬鼠標輸入/輸出上的div陣列延遲

我想結束與的div環鼠標進入和離開上的負載，一個接一個，每個後延遲。這是我正在開展的工作。模擬鼠標輸入/輸出上的div陣列延遲

var slides = $(".gallery_slide"); 
 
$.each(slides, function(index, value) { 
 

 

 
});

.gallery_slide { 
 
    display: block; 
 
    width: 50px; 
 
    height: 50px; 
 
    font-size: 20px; 
 
    background-color: red; 
 
    text-align: center; 
 
} 
 

 
.gallery_slide:hover { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="gallery_slide">1</div> 
 
<div class="gallery_slide">2</div> 
 
<div class="gallery_slide">3</div> 
 
<div class="gallery_slide">4</div>

來源

2016-01-01 Micor

@Micor請檢查我的答案 – Hemal

你可以有這樣的事情

WORKING FIDDLE

var slides = $(".gallery_slide"); 
var delay=500; 
slides.each(function(){ 
    $(this).delay(delay).animate({ 
     'background-color':'green' 
    },500,function(){ 
     $(this).css("background-color","red"); 

    }); 
    delay += 500; 
});

更新與循環動畫

WORKING FIDDLE 2

var slides = $(".gallery_slide"); 
var delay=1000; 
var i=0; 
function doLoop(){ 

slides.each(function(){ 
    $(this).delay(delay).animate({ 
     'background-color':'green' 
    },1000,function(){ 
     $(this).css("background-color","red"); 
     console.log(i); 
     if(i==slides.length-1){ 
      i=0; 
     delay=1000; 
     doLoop(); 
     } 
     else{ 
      i++; 
     } 
    }); 

    delay += 1000; 

}); 
} 

doLoop();

來源

2016-01-01 06:51:10 Hemal

感謝您的回覆和工作小提琴。它按預期工作，但只做一次，而不是一遍又一遍循環。如果我不清楚我的問題，我很抱歉，但這就是我所說的「循環」。 – Micor

@Micor我更新了** UPDATE 2 **中提供循環動畫的工作小提琴的代碼。請檢查。 – Hemal

檢查了這一點

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript"> 

function changeColor(obj, index){ 

    setTimeout('$(".gallery_slide:nth-child(' + (index+1) + ')").toggleClass(\'gallery_slide_hover\')', index*1000); 

    setTimeout('$(".gallery_slide:nth-child(' + (index+1) + ')").toggleClass(\'gallery_slide_hover\')', (index*1000) + 1000); 

} 

$(document).ready(function(){ 

    var slides = $(".gallery_slide"); 
    $.each(slides, function(index, value) { 

     //$(this).toggleClass('gallery_slide_hover'); 

     changeColor($(this), index); 

    }); 

}); 




</script> 
<style type="text/css"> 
.gallery_slide { 
    display: block; 
    width: 50px; 
    height: 50px; 
    font-size: 20px; 
    background-color: red; 
    text-align: center; 
    transition: all 1s ease 0s; 
} 

.gallery_slide_hover { 
    background-color: green; 
} 
</style> 
</head> 
<body> 

<div class="gallery_slide" style="display: none;">0</div> 
<div class="gallery_slide">1</div> 
<div class="gallery_slide">2</div> 
<div class="gallery_slide">3</div> 
<div class="gallery_slide">4</div> 
</body> 
</html>

來源

2016-01-01 06:53:03

感謝您的回覆。它看起來會播放一次而不是循環，一遍又一遍地播放，這正是我想要完成的。另外，請注意＃4永遠不會產生懸停效果。 – Micor

模擬鼠標輸入/輸出上的div陣列延遲

回答

相關問題