0

我有这个简单的滑块 JScript，它可以根据您单击的按钮将缩略图悬停在左侧或右侧。

<script>
$(document).ready(function()
{
$(".right-arrow").click(function(){
$(".box1").animate({right:"1100px"},800);
$(".box2").animate({right:"1100px"},1000);
$(".box3").animate({right:"1100px"},1200);
$(".box4").animate({right:"1100px"},1400);
$(".box5").animate({right:"1100px"},1600);
$(".box6").animate({right:"1100px"},1800);
$(".box7").animate({right:"1100px"},2000);
$(".box8").animate({right:"1100px"},2200);
$(".box9").animate({right:"1100px"},2400);
$(".box10").animate({right:"1100px"},2600);
$(".box11").animate({right:"1100px"},2800);
$(".box12").animate({right:"1100px"},3000);
});
$(".left-arrow").click(function(){


$(".box12").animate({right:"0px"},800);
$(".box11").animate({right:"0px"},1000);
$(".box10").animate({right:"0px"},1200);
$(".box9").animate({right:"0px"},1400);
$(".box8").animate({right:"0px"},1600);
$(".box7").animate({right:"0px"},1800);
$(".box6").animate({right:"0px"},2000);
$(".box5").animate({right:"0px"},2200);
$(".box4").animate({right:"0px"},2400);
$(".box3").animate({right:"0px"},2600);
$(".box2").animate({right:"0px"},2800);
$(".box1").animate({right:"0px"},3000);
});
});

</script>

但是，如果我单击右侧按钮，然后快速单击左侧按钮，则会出现一堆缩略图“相互碰撞”。

我如何插入一个不错的回调函数以等待一侧的动画完成，然后以另一种方式继续？

4

2 回答 2

2

首先，当您在代码中看到模式时，这很好地表明您应该开始重构：

$(document).ready(function() {

    $(".right-arrow").click(function(){
        for (i = 1; i < 13; i++){
            $('.box' + i).stop().animate({
                right: 1000
            }, {
                duration: 600 + (i * 200), 
                queue: true
            });
        }
    });
    $(".left-arrow").click(function(){
        for (i = 1; i < 13; i++){
            $('.box' + i).stop().animate({
                right: 0
            }, {
                duration: 3200 - (i * 200),
                queue: true
            });
        }
    });
}

关于时间冲突，您只需要传递true队列选项，这将确保后续动画在之前的动画完成后开始。

于 2013-05-21T09:19:08.633 回答
1

看看这里JQuery Animate

var domArray = [$(".box1"), $(".box2"), $(".box3")....];
var runningIndex = 0;

function runAnimate(){
  domArray[runningIndex].animate({right:"0px"},800 + runningIndex*200, function(){
    if(domArray.length > runningIndex){
      runningIndex ++;
      runAnimate();
    }
  });
}

$(".right-arrow").click(function(){
  runningIndex = 0;
  runAnimate();
});

试试这个：D希望可以帮助你

于 2013-05-21T09:13:25.473 回答