Is it possible to animate attribute change using jQuery? : <p>I need to change the "src" attribute of an "img" element after hovering over its parent element.</p>

<p>I have this HTML:</p>

<pre><code>&lt;div class="thumbnail"&gt;
    &lt;img src="img/1_thumb.jpg"&gt;
&lt;/div&gt;
</code></pre>

<p>And I need to change the src value from "img/1_thumb.jpg" to "img/1_thumb_hov.jpg"</p>

<p>I did it with this jQuery code</p>

<pre><code>$('.thumbnail').hover(function() {
    $(this).children(0).attr('src', 'img/1_thumbnail_hov.jpg');
}, function() {
    $(this).children(0).attr('src', 'img/1_thumbnail.jpg');
});
</code></pre>

<p>But as you can tell, this will only do a fast change and I'd like to make it fade if possible.</p>

<p>Thank you so much, if you can help me solve this.</p>
