0

我制作了一个比较图表，用户漂浮在一个功能上，一个小框（div）滑出提供详细信息（比如'somethingBox1'）

我已经完全正常工作了，但是当鼠标离开一个活动区域（带有 id="something1" 的图像）到另一个bedore 幻灯片动画结束时（图像 id="something2" 可以说），我遇到了问题

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

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

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

2 回答 2

0

尝试使用stop，这将停止任何当前动画。我喜欢让动画（立即）完成动画，以确保新动画按预期运行。

像这样的东西：

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

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

于 2012-12-31T14:57:01.717 回答
0

在阅读了有关该主题的更多内容后，我遇到了完整的调用功能，

我在每个 .animate 函数的末尾添加了 function(){}，它似乎让浏览器等待（在 ie、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);});
于 2012-12-31T15:00:32.727 回答