Question

我正在制作一个jQuery滑动菜单，它会在悬停时激活。

看起来很棒但是我必须并排运行两个div元素上的动画。

我似乎正在使用下面的脚本设想它，但在IE 7中没有，所以我想脚本可以更好。

我正在运行动画的div元素彼此紧密相连，两者之间没有间隙。

所以我想，通过使用下面的脚本，定位彼此相邻的两个div .. ＃sidebar-inner 和＃latest-tweet ，它会自动停留在第一个功能上，但当我从＃sidebar-inner div 滚动到 #news-tweet div 时，在IE中运行第二个功能然后运行第一个功能。

    $('#sidebar-inner,#latest-tweet').hover(function() {
        $("#wrapper").animate({ left: "-178px" }, 300);
        $("#sidebar-slider").animate({ width: "512px" }, 300);
        $("#latest-tweet").animate({ width: "512px" }, 300);
    }, function() {
        $("#wrapper").animate({ left: "0" }, 300);
        $("#sidebar-slider").animate({ width: "334px" }, 300);
        $("#latest-tweet").animate({ width: "334px" }, 300);        
    });

如何更改脚本，最终这些脚本将以完全一致的方式运行。

还是不可能？

非常感谢任何帮助，谢谢。

根据问题得到简化的JSFIDDLE以帮助谢谢 http://jsfiddle.net/motocomdigital/9zeYc/

Answer 1

问题是你的动画正在排队。也就是说，它们彼此相加。将stop()添加到动画中。这将阻止他们再次徘徊时继续运行：

$('#sidebar-inner, #latest-tweet').hover(function() {
    $("#sidebar-inner").stop().animate({ right: "0" }, 300);
    $("#latest-tweet").stop().animate({ right: "0" }, 300);
}, function() {
    $("#sidebar-inner").stop().animate({ right: "-250px" }, 300);
    $("#latest-tweet").stop().animate({ right: "-250px" }, 300);        
});

http://jsfiddle.net/Zc7LL/

您还可以阻止动画像这样排队：

$("#sidebar-inner").animate({ right: "0" }, { duration: 300, queue: false });

然而，这似乎并不像停止动画一样顺利。

同步运行jQuery动画

1 个答案: