[英]How to make jQuery animate work only once?
我尝试制作一个动画,如果用户单击下一步并到达隐藏的图像,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,然后单击以检查动画是否为true,如果将其设置为false并播放动画,则.animation()
还具有一个回调函数,该回调函数指定动画何时具有完成后,将动画变量设置为true,以便下次需要时可以再次播放动画,如果您不希望再次播放该动画,只需删除变量和/或整个回调函数即可。
只是稍微改善您的活动注册:
$(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);
});
});
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.