Question

我制作一个比较图表，用户可以在一个功能上漂浮，一个小方框（div）滑出来提供详细信息（比如说＆＃39; somethingBox1＆＃39;）

我完全正常工作，但是当鼠标将一个活动区域（id =＆＃34; something1＆＃34;的图像）留在另一个床上时幻灯片动画结束时（图像id = ＆＃34;某事2＆＃34;让我们说）

在运行下一个事件之前，浏览器似乎没有等待上一行/动画完成，并导致诸如框之类的问题混淆是否可见。

我正在为每个元素触发此代码：

$('#something1').mouseleave(function() {$("#somethingBox1").animate({width:'toggle'},0);});
$('#something1').mouseover(function(){timeout = window.setTimeout(function() {$("#somethingBox1").animate({width:'toggle'},0);}, 350);});

Answer 1

尝试使用stop，这将停止当前的动画。我喜欢动画完成动画（立即），以确保新动画的行为符合预期。

这样的事情：

$('#something1').hover(
    function() {
        $(this).stop(true, true).wait(350).animate({width:'toggle'}, 0);
    },            
    function() {
        $(this).stop(true, true).animate({width:'toggle'},0);
    }
);

（我没有测试过这段代码。）

Answer 2

在阅读了有关该主题的更多信息之后，我在完成时遇到了呼叫功能，

我在每个.animate函数的末尾添加了function（）{}，它似乎让浏览器等待（在chrome，safari，opera，firefox中测试）

$('#infolink6').mouseleave(function() {$("#infoBox6").animate({width:'toggle'},350, function(){});});
$('#infolink6').mouseover(function(){timeout = window.setTimeout(function() {$("#infoBox6").animate({width:'toggle'},350, function(){});}, 0);});

快速连续触发的jQuery会导致问题

2 个答案: