mouseenter is being applied to all elements
<p>I have written a bit of jquery which has a timeout function, so after you have hover over the element for a set time a more button appear you then hover that to see a little more about the article.  </p>

<p>This all works fine as a seperate element, but I will have more then one.</p>

<p>Each time I hover over one, the effect is applied to all the elements.</p>

<p>Ive tried using $(this).find('') but this doesnt have any effect.</p>

<p>Can anyone help?</p>

<p>Heres the JS fiddle.</p>

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

<pre><code>$(document).ready(function () {
// Article hover function   
var myTimeout;

$('.articleContainer').mouseenter(function () {

    myTimeout = setTimeout(function () {

        $('.moreBtn').animate({
            'top': '0px'
        }, 'normal');
        $('.moreBtn').hover(function () {
            $('.moreDetail').animate({
                'top': '0px'
            }, 'slow');
        });

    }, 500);

})

    .mouseleave(function () {
    $('.moreDetail').animate({
        'top': '-335px'
    }, 'fast',

    function () {

        $('.moreBtn').animate({
            'top': '40px'
        }, 'fast');

    });

    clearTimeout(myTimeout);

});
</code></pre>

<p>});</p>
