同步 jQuery 动画答案

【问题标题】：Simultaneous jQuery Animations同步 jQuery 动画
【发布时间】：2011-07-23 21:43:17
【问题描述】：

我正在尝试同时触发淡入淡出（不透明度切换）和边框淡入淡出（使用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

非常感谢。谢谢！

【问题讨论】：

如果你能提供一个演示就好了，比如在 jsfiddle.net 上

标签： javascript jquery asynchronous jquery-animate

【解决方案1】：

默认情况下，JQuery 将动画放置在效果队列中，这样它们就会一个接一个地发生。如果您希望动画立即发生，请在您的动画选项映射中设置 queue:false 标志。

例如，在你的情况下，

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

会变成

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

您可能还想使用选项映射并为边框动画设置队列。

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

【讨论】：

【解决方案2】：

$.fn.extend({
  key_fadeIn: function() {
    return $(this).animate({
      opacity: "1"
    }, { duration:600, queue:false });
  },
  key_fadeOut: function() {
    return $(this).animate({
      opacity: "0.4"
    }, { duration:600, queue:false });
  }
});

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"
  });
};

【讨论】：