我不知道这是否可行,但我有3个DIV,它们都有fadeIn和Out。像这样:
$('.boxHolder1').hover(function() {
$('img.top1').fadeOut(400);
},function() {
$('img.top1').fadeIn(400);
});
$('.boxHolder2').hover(function() {
$('img.top2').fadeOut(400);
},function() {
$('img.top2').fadeIn(400);
});
$('.boxHolder3').hover(function() {
$('img.top3').fadeOut(400);
},function() {
$('img.top3').fadeIn(400);
});
我的问题。
无论如何都是为了让这段代码更有效率,当我用鼠标在DIV上垃圾邮件时,我得到一个延迟,DIV只是淡入淡出并且随机,就像它记录的X悬停一样,并相应地应用代码。
答案 0 :(得分:2)
您应该使用jQuery中的stop函数来停止以前运行的任何动画:
$('.boxHolder1').hover(
function() { $('img.top1').stop().fadeOut(400); },
function() { $('img.top1').stop().fadeIn(400); });
$('.boxHolder2').hover(
function() { $('img.top2').stop().fadeOut(400); },
function() { $('img.top2').stop().fadeIn(400); });
$('.boxHolder3').hover(
function() { $('img.top3').stop().fadeOut(400); },
function() { $('img.top3').stop().fadeIn(400); });
答案 1 :(得分:0)
是的,事件处理程序调用已排队。那当然不是一个错误。
在回调中,您可以使用stop()
来停止当前正在运行的动画。确保将true
作为第一个参数取消排队,并true
作为第二个参数来立即停止当前正在运行的动画 ,同时保留其目标属性。
$('.boxHolder3').hover(function() {
$('img.top3').stop(true, true).fadeOut(400);
},
function() {
$('img.top3').stop(true, true).fadeIn(400);
});
虽然你可以通过巧妙地使用变量来减少代码重复,但你不会再“高效”了。
答案 2 :(得分:0)
您可以在任何FADEIN / FADEOUT之前停止动画。
实施例
$('img.top1').stop(true,true).fadeOut(400);
它将清除队列并立即完成动画。 更改stop()函数的两个参数以满足您的需求。