Question

我想最终得到一个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>

Answer 1

你可以有这样的东西

<强> 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();

Answer 2

检查出来

<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>

模拟鼠标在延迟的div数组上输入/输出

2 个答案: