Toggle animation classes and release all others
<p>I can't find a post specifically for this (although I'm sure it exists and I'm failing to find it.)</p>

<p>I have it so an image <code>.regularpic</code> toggles a whole specific div <code>#title</code> to appear upon clicking.  Is there a more efficient way of having my code reset the other classes without all of those lines?</p>

<p>THE HTML IS THIS :</p>

<pre><code>&lt;img src="images/wordpress.png" alt="" class="regularpic first" /&gt;
&lt;img src="images/google.png" alt="" class="regularpic second"  /&gt;
&lt;img src="images/html5.png" alt=""  class="regularpic third" /&gt;
&lt;img src="images/adobe.png" alt=""  class="regularpic fourth" /&gt;
&lt;img src="images/jquery.png" alt=""  class="regularpic fifth" /&gt;
</code></pre>

<p>THE JQUERY IS THIS :</p>

<pre><code>$(function() {
$(".first").click(
    function() {
    $(".second, .third, .fourth, .fifth").stop().animate({opacity:0.4 }, 500);
    $(".first").stop().animate({opacity:1.0 }, 500);
    $("#title2, #title3, #title4, #title5").stop()
                                           .animate({opacity:0.0, 
                                                     backgroundColor: '#fff',
                                                     color: '#fff',width: 580,
                                                     height:50}, 200);
        $("#title1").stop().animate({opacity:1.0, 
                                     backgroundColor: '#fff', 
                                     color: '#000', width: 580, 
                                     height: 300 }, 600);
                });
});
$(function() {
$(".first").click(
    function() {
    $(".first, .third, .fourth, .fifth").stop().animate({opacity:0.4 }, 500);
    $(".second").stop().animate({opacity:1.0 }, 500);
    $("#title1, #title3, #title4, #title5").stop()
                                           .animate({opacity:0.0, 
                                                     backgroundColor: '#fff',
                                                     color: '#fff',width: 580,
                                                     height:50}, 200);
        $("#title2").stop().animate({opacity:1.0, 
                                     backgroundColor: '#fff', 
                                     color: '#000', width: 580, 
                                     height: 300 }, 600);
                });
});
</code></pre>

<p>There has to be a more efficient way no?</p>
