如何使jQuery动画只工作一次?

时间:2017-09-08 14:42:18

标签: javascript jquery css animation

我尝试制作一个动画,如果用户点击下一个并且它到达隐藏的图像,jQuery动画将生效以显示下一批图像。例如,如果我有六个图像并且显示前三个图像,如果用户第四次点击,它现在将滚动以查看最后三个图像。现在,我只想使用动画一次。问题是,每次单击按钮时它仍然会继续动画。如何只使用动画一次?

这是脚本:

next.onclick = function(){
  document.getElementById("defaultPic").src = srcArray[(counter + 1) % numImages];
  counter++;
  if(counter == 5) {
    document.getElementById('next').disabled = true;
    document.getElementById('next').style.opacity = '0.5';
    document.getElementById('prev').disabled = false;
    document.getElementById('prev').style.opacity = '1';
  }
  if(counter == 2) {
    $(function() {
      $('#next').on('click', function () {
        $('#imageList').stop().animate({left : '-=285px'}, 1000);
      });
    });
  }
}

2 个答案:

答案 0 :(得分:1)

var animation = true;

next.onclick = function() {

    document.getElementById("defaultPic").src = srcArray[(counter + 1) % numImages];
    counter++;

    if (counter == 5) {
        document.getElementById('next').disabled = true;
        document.getElementById('next').style.opacity = '0.5';
        document.getElementById('prev').disabled = false;
        document.getElementById('prev').style.opacity = '1';
    }

    if (counter == 2) {
        $(function() {
                $('#next').on('click', function() {
                        if (animation) {
                            animation = false;
                            $('#imageList').stop().animate({
                                left: '-=285px'
                            }, 1000, function() {
                                animation = true;
                            }););
                    }
                });
        });
}

我设置了一个名为 animation 的全局布尔值,设置为true,然后点击,检查 动画 < / strong>是真的,如果这样设置为假并播放动画,.animation()还有一个回调函数,它指定动画完成后一旦完成设置 动画 < / strong>变量返回true,因此如果需要,下一次单击可以再次播放动画,如果您不希望它再次播放,只需删除变量和/或整个回调函数。

.animation() docs

答案 1 :(得分:0)

稍微改善您的活动注册:

$(next).one('click', function(){

    document.getElementById("defaultPic").src = srcArray[(counter + 1) % numImages];
    counter++;

    if(counter == 5){
    document.getElementById('next').disabled = true;
    document.getElementById('next').style.opacity = '0.5';
    document.getElementById('prev').disabled = false;
    document.getElementById('prev').style.opacity = '1';
  }

  if(counter == 2){
  $(function () {
    $('#next').on('click', function () {
     $('#imageList').stop().animate({left : '-=285px'}, 1000);
     });
  });
 }

})