同时jQuery的动画 [英] Simultaneous jQuery Animations
问题描述
我想就获得了淡入(不透明切换)和边境淡入淡出(使用的jQuery -animate-颜色)同时开火,但我遇到了一些麻烦。谁能帮检查以下code?
I'm trying to get both a fadeIn (opacity toggle) and border fade (using jquery-animate-colors) to fire simultaneously but I'm having some trouble. Can someone help review the following code?
$.fn.extend({
key_fadeIn: function() {
return $(this).animate({
opacity: "1"
}, 600);
},
key_fadeOut: function() {
return $(this).animate({
opacity: "0.4"
}, 600);
}
});
fadeUnselected = function(row) {
$("#bar > div").filter(function() {
return $(this).id !== row;
}).key_fadeOut();
return $(row).key_fadeIn();
};
highlightRow = function(row, count) {
return $(row).animate({
"border-color": "#3737A2"
}).animate({
"border-color": "#FFFFFF"
}).animate({
"border-color": "#3737A2"
}).animate({
"border-color": "#FFFFFF"
});
};
fadeUnselected("#foo");
highlightRow("#foo"); // doesn't fire until fadeUnselected is complete
真的AP preciate它。谢谢!
Would really appreciate it. Thanks!
推荐答案
默认情况下,JQuery的动画放置在效果队列所以他们会陆续发生。如果你想要一个动画发生立即设置队列:假
标志在动画选项映射
By default, JQuery places animations in the effects queue so they will happen one after another. If you want an animation to happen immediately set the queue:false
flag in your animate options map.
例如,你的情况,
$(this).animate({
opacity: "1"
}, 600);
将成为
$(this).animate(
{
opacity: "1"
},
{
duration:600,
queue:false
});
你很可能要使用的选项映射,并为边境动画队列为好。
You'd likely want to use the options map and set the queue for the border animation as well.
http://api.jquery.com/animate/
这篇关于同时jQuery的动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!