Simplfying Jquery
<p>Hi im just learning Jquery atm, and I'm wondering what is the best method for simplifying the following:</p>

<pre><code>$(document).ready(function() {
$('.hover').hide();

$( '.state' ).hover(function() {
    $('.divtop .state').stop().animate({opacity:0}, 300),
    $('.divtop .hover').show(),
    $('.divtop .hover').stop().animate({opacity:1}, 1000);
    },

    function() {
    $('.divtop .hover').stop().animate({opacity:0}, 600,'',function(){$(this).hide()});
    $('.divtop .state').stop().animate({opacity:1}, 500);

    });

$( '.divmiddle .state' ).hover(function() {
    $('.divmiddle .state').stop().animate({opacity:0}, 300),
    $('.divmiddle .hover').show(),
    $('.divmiddle .hover').stop().animate({opacity:1}, 1000);
    }, function() {

    $('.divmiddle .hover').stop().animate({opacity:0}, 600,'',function(){$(this).hide()});
    $('.divmiddle .state').stop().animate({opacity:1}, 500);

    });

$( '.divbottom .state' ).hover(function() {
    $('.divbottom .state').stop().animate({opacity:0}, 300),
    $('.divbottom .hover').show(),
    $('.divbottom .hover').stop().animate({opacity:1}, 1000);
    }, function() {

    $('.divbottom .hover').stop().animate({opacity:0}, 600,'',function(){$(this).hide()});
    $('.divbottom .state').stop().animate({opacity:1}, 500);

    });
});
</code></pre>

<p>The html looks like so:</p>

<pre><code>&lt;section class="left"&gt;
            &lt;div class="divtop"&gt;
                &lt;img src="img/layout/blue.png" class="state" alt="blue" /&gt;
                &lt;img src="img/layout/bluehover.png" class="hover" alt="bluehover" /&gt;
            &lt;/div&gt;&lt;!-- close class divtop --&gt;
            &lt;div class="divmiddle"&gt;
                &lt;img src="img/layout/red.png" class="state" alt="red" /&gt;
                &lt;img src="img/layout/redhover.png" class="hover" alt="redhover" /&gt;
            &lt;/div&gt;&lt;!-- close class divmiddle --&gt;
            &lt;div class="divbottom"&gt;
                &lt;img src="img/layout/pink.png" class="state" alt="pink" /&gt;
                &lt;img src="img/layout/pinkhover.png" class="hover" alt="pinkhover" /&gt;
            &lt;/div&gt;&lt;!-- close class divbottom --&gt;

        &lt;/section&gt;&lt;!-- close left section --&gt;
</code></pre>

<p>The images in css are positioned absolute so they lie on top of each other.</p>
