同时jQuery动画

Question

我试图让fadeIn(不透明度切换)和边框淡入淡出(使用jquery-animate-colors)同时触发但我遇到了一些麻烦.有人可以帮助查看以下代码吗？

$.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

真的很感激.谢谢!

Answer 1

默认情况下,JQuery将动画放置在效果队列中,以便它们一个接一个地发生.如果要立即动画,请queue:false在动画选项图中设置标记.

例如,在您的情况下,

$(this).animate({
      opacity: "1"
    }, 600);

会成为

$(this).animate(
{
    opacity: "1"
}, 
{
    duration:600,
    queue:false
});

您可能希望使用选项映射并为边框动画设置队列.

http://api.jquery.com/animate/