Which is better: Jquery.animate() or css transitions with setTimeOut
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/10863000/is-it-better-to-use-jquery-fadein-or-css3-animations">Is it better to use jQuery fadeIn or CSS3 animations?</a><br>
  <a href="http://stackoverflow.com/questions/10984771/whats-faster-css3-transitions-or-jquery-animations">what’s faster? CSS3 transitions or jQuery animations?</a>  </p>
</blockquote>



<p>I am trying to do an animation and speed is of an essence. I have tried two methods both of which work, however I would like to know which one is more effective. </p>

<p>Method 1: Using Jquery.animate()
My code looks something like:</p>

<pre><code>$("div").animate({opacity: "show"}, 100, "linear", function() {
    console.log("Animation Complete");
});
</code></pre>

<p>Method 2: Using Css transitions with setTimeOut:
This is what the code looks like:</p>

<pre><code>$("div").addClass("hidden") //On Page load
</code></pre>

<p>Then to animate the fade in:</p>

<pre><code>setTimeout(function () {
    $("div").removeClass('hidden');
}, 100);
</code></pre>

<p>Hidden has the following style property:</p>

<pre><code>.hidden { opacity: 0 !important; }
</code></pre>

<p>Both work rather well, but I want to know which one is more efficient/better.</p>
