Simultaneous jQuery Animations

Question

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

Would really appreciate it. Thanks!

Would be nice if you could provide a demo, such as on jsfiddle.net — karim79, Jul 23 '11 at 21:45

score 9 · Accepted Answer · answered Jul 23 '11 at 21:47

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.

For example, in your case,

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

would become

$(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/

score 0 · Answer 2 · answered Jul 23 '11 at 21:48

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

Simultaneous jQuery Animations

2 Answers2

Linked