如何使jQuery动画仅工作一次? [英] How to make jQuery animate work only once?

问题描述

我尝试制作一个动画，如果用户单击下一步并到达隐藏的图像，则jQuery动画将生效以显示下一批图像.例如，如果我有六个图像，并且显示前三个图像，那么如果用户第四次单击，它现在将滚动以查看最后三个图像.现在，我只想使用一次动画.问题是，每当我单击该按钮时，它仍将继续进行动画处理.如何只使用一次动画?

I tried making an animation that if the user clicks next and it reaches to an image that is hidden, the jQuery animation will take effect to display the next batch of images. Like for example if I have six images and the first three images are displayed, if the user clicks for the fourth time, it will now scroll to view the last three images. Now, I only want to use the animation once. The problem is, it will still continue to animate every time I click the button. How to only use the animation once?

这是脚本:

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);
      });
    });
  }
}

推荐答案

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，然后单击以检查 animation 为true，如果将其设置为false并播放动画，则.animation()还具有回调函数，该函数指定完成 animation 动画后何时完成动画. >将变量恢复为true，以便下次单击时可以再次播放动画(如果您不希望再次播放该动画)，只需删除变量和/或整个回调函数即可.

I have set up a global boolean called animation which is set to true, then on click, check if animation is true, if so set it to false and play animation, the .animation() has also a callback function which specifies when animation has been completed once completed set the animation variable back to true so next click can play the animation again if needed, if you don't want it to be playable again, just remove the variable and/or whole callback function.

.animation()文档

这篇关于如何使jQuery动画仅工作一次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！