Question

我有这个简单的滑块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>

然而，如果我单击右键然后快速单击左键，我会看到缩略图的拥挤，并且会发生碰撞。彼此。

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

Answer 1

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

$(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，这将确保在之前的动画完成之后开始动画。

Answer 2

请看这里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希望可以帮到你

如何正确插入回调函数，以便让一个函数结束然后执行另一个函数

2 个答案: