JQuery всегда запускает mouseenter

Question

Я не могу заставить Javascript работать. Каждый раз, когда я вхожу в div (мышь вверх по элементу), jQuery постоянно срабатывает.

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> 

Что я хочу: Когда пользователь парения #roxo-um, .image нужно скрыть с Jquery UI эффект падения и показать .text с таким же эффектом, скользя подниматься. Когда пользователь покинет #roxo-um, сделайте то же самое, но спрячьте .text и покажите .image.

Как я могу это сделать, потому что мой текущий сценарий постоянно срабатывает?

Спасибо.

Answer 1

Похоже, что события ввода & запускаются спорадически по мере того, как изменяется высота div # roxo-um.

Смотрите пример здесь: http://jsfiddle.net/NGtrS/ (удалить высоту & посмотреть разницу)