How to toggle size of responsive images, with a twist
<p>I have set up a fiddle with the functionality I am after, however I cannot figure out how to achieve the same result when the images have a percentage-based width.</p>

<p><a href="http://jsfiddle.net/bs8Tw/" rel="nofollow">http://jsfiddle.net/bs8Tw/</a></p>

<pre><code>$('img').click(function() {

    var toggleWidth = $(this).width() == 350 ? '700px' : '350px';

    $('img').animate({ width: '350px' });
    $(this).animate({ width: toggleWidth });

});    
</code></pre>

<p>As you can see, when an image is clicked, it doubles in width. When it is clicked again, it returns to its normal size. The key here, however, is that if one image is clicked, then another, the first image returns to its normal size before the second image increases. </p>

<p>Basically, I am looking for this exact functionality, but I would like the image to toggle between a 50% and 100% width.</p>
