我尝试制作一个动画，如果用户点击下一个并且它到达隐藏的图像，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); }); }); } }
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，然后点击，检查动画是否为真，若是设置为false并播放动画， .animation()还有一个回调函数，指定动画何时已完成设置完成后将动画变量设置为true，以便下次单击可以根据需要再次播放动画，如果您不希望它再次播放，只需删除变量和/或整个回调函数。
.animation（）docs
稍微改善您的活动注册：
$(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); }); }); } })
以上就是jQuery教程分享如何使jQuery动画只工作一次？相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/558516.html