jQuery: Change Image Width on Hover
<p>I have two images side-by-side. When the user hovers over an image, it should expand.</p>

<h2>HTML:</h2>

<pre><code>&lt;a href="#"&gt;&lt;div id="skinny"&gt;&lt;/div&gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;div id="room9"&gt;&lt;/div&gt;&lt;/a&gt;
</code></pre>

<h2>jQuery:</h2>

<pre><code>$('#skinny').hover(function() {
    $(this).animate({width: '220px'}, 'fast');
    $('#room9').animate({width: '80px'}, 'fast');
}, function() {
    $(this).animate({width:'150px'},'fast');
    $('#room9').animate({width: '150px'}, 'fast');
});
</code></pre>

<p><strong>jsFiddle:</strong> <a href="http://jsfiddle.net/G4q4q/" rel="nofollow">http://jsfiddle.net/G4q4q/</a></p>

<p>It "works" with the left image, but I couldn't get it to work with the right. My current method is inefficient, so if you have any suggestions to optimize it, please let me know.</p>
