[英]Script Lags When Clicking Too Fast [jQuery]
我写的图库脚本有问题。 基本上,有一组缩略图和一个带箭头的大图像。 单击缩略图时,当前图像逐渐淡出,而加载新图像时,图像逐渐淡入。我遇到的问题是,如果在过渡过程中多次单击缩略图或箭头,更改当前显示的图像),整个过程就会开始延迟。 点击次数越多,他们看到的延迟就越多。
假设我在淡入淡出过渡中单击了五次。 当前转换完成后,如果我单击另一个缩略图/箭头,脚本效果不会像预期的那样立即开始,它会滞后几秒钟,然后开始。
这是我的脚本:
$(".jTscroller a").click(function(event) {
event.preventDefault();
var last = $("#photo").attr("src");
var target = $(this).attr("href");
if (last != target) {
$("#photo").stop(false,false).fadeTo("fast", 0, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
});
});
};
});
$("#photo-area .arrow.left").click(function(event) {
event.preventDefault();
var current = $("#photo-area #photo").attr("src");
var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
if (typeof prev != "undefined") {
if (prev != current) {
$("#photo").stop(false,false).fadeTo("fast", 0, function() {
$("#photo").attr("src",prev);
$("#photo").load(function() {
$("#photo").fadeTo("fast");
});
});
};
};
});
$("#photo-area .arrow.right").click(function(event) {
event.preventDefault();
var current = $("#photo-area #photo").attr("src");
var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
if (typeof next != "undefined") {
if (next != current) {
$("#photo").stop(false,false).fadeTo("fast", 0, function() {
$("#photo").attr("src",next);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
});
});
};
};
});
JS小提琴: http : //jsfiddle.net/G5VAf/7/
我的修正理论是添加一个布尔变量,该变量在动画完成时会更改,但是我尝试过50次却没有成功。 希望有人比我更熟练。
哦,我知道我应该将其缩小为一个较小的脚本,我只是想使此工作正常进行,然后再继续下去。
更新:尝试实现下面提到的队列操作,现在它根本不会消失。
$("#photo").animate({
opacity: 0
}, {queue: false, duration: 500}, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").animate({
opacity: 1
});
});
});
更新2:知道了。 最终脚本:
$(document).ready(function() {
$(".jTscroller a").click(function(event) {
event.preventDefault();
var last = $("#photo").attr("src");
var target = $(this).attr("href");
if (last != target) {
$("#photo").stop(false,true).animate({
opacity: 0
}, {queue: false, duration: 500, complete: function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").stop(false,false).animate({
opacity: 1
}, {queue: false, duration: 500});
});
}});
};
});
$("#photo-area .arrow.left").click(function(event) {
event.preventDefault();
var current = $("#photo-area #photo").attr("src");
var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
if (typeof prev != "undefined") {
if (prev != current) {
$("#photo").stop(false,true).animate({
opacity: 0
}, {queue: false, duration: 500, complete: function() {
$("#photo").attr("src",prev);
$("#photo").load(function() {
$("#photo").stop(false,false).animate({
opacity: 1
}, {queue: false, duration: 500});
});
}});
};
};
});
$("#photo-area .arrow.right").click(function(event) {
event.preventDefault();
var current = $("#photo-area #photo").attr("src");
var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
if (typeof next != "undefined") {
if (next != current) {
$("#photo").stop(false,true).animate({
opacity: 0
}, {queue: false, duration: 500, complete: function() {
$("#photo").attr("src",next);
$("#photo").load(function() {
$("#photo").stop(false,false).animate({
opacity: 1
}, {queue: false, duration: 500});
});
}});
};
};
});
});
听起来好像您在设置动画队列时遇到了问题。 您正在使用的jQuery函数只是.animate()
函数的简写。
.animate( properties, options )
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
基本上,每次单击都会添加到动画队列中,因此会产生延迟。 您可以尝试.animate()
函数,并将queue设置为false
,看看是否有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.