title: Simultaneous jQuery Animations
body: <p>I'm trying to get both a fadeIn (opacity toggle) and border fade (using <a href="http://www.bitstorm.org/jquery/color-animation/" rel="nofollow">jquery-animate-colors</a>) to fire simultaneously but I'm having some trouble. Can someone help review the following code?</p>
  
  <pre><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 &gt; 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
  </code></pre>
  
  <p>Would really appreciate it. Thanks!</p>