Jquery always trigger mouseenter

Question

I can't get Javascript to work. Every time I enter the div (mouse up the element) jQuery fire continuously.

Jquery

jQuery(document).ready(function($) {
    $('#banner-roxo .text').hide();

    $('#roxo-um').mouseenter(function() {
        $(this).children('.image').hide().effect('drop', {direction: "down"}, 1000, function() {
            $(this).parent().children('.text').show().effect('drop', {direction: "up"}, 1000);
        })
    }).mouseleave(function() {
        $(this).children('.text').hide().effect('drop', {direction: "down"}, 1000, function() {
            $(this).parent().children('.image').show().effect('drop', {direction: "up"}, 1000);
        })
    })
});

HTML:

<div id="banner-roxo">
    <div id="roxo-um">
        <div class="image">
            <img src="http://www.d1digital.com.br/clientes/audiolab/wp-content/themes/d1Digital/images/roxo_1.png" height="181px" width="181px" border="0px" />
        </div>
        <div class="text">
            Imergimos na marca, seu universo e aspirações; extraímos os conceitos que definem a sua identidade sonora.
        </div>
    </div>
</div>

What I want: When user hover #roxo-um, .image need to hide with Jquery UI drop effect and show .text with same effect, sliding to up. When user leave #roxo-um, do the same, but hide .text and show .image.

How I can do this, because my current script fire continuously?

Thanks.

Answer 1

It looks like the enter & leave events are triggered sporadically as the height of the div#roxo-um changes.

See example here: http://jsfiddle.net/NGtrS/ (remove the height & watch the difference)