文本中斷鼠標懸停

Question

當光標懸停時，我創建一個div動畫。
這是使用mouseover（jquery）。
現在的問題是，該div上的文本會中斷動畫，因爲光標不再與div直接接觸。

我該如何解決這個問題？

//navi is the div. 

    $("#navi").mouseover(function(){ 
     $("#navi").stop(); 
     $("#navi").animate({width:'200px'},{queue: false,easing:"easeOutBounce",duration:1200}); 
    }); 

相同的代碼在text-div上。

你可以在這裏http://jsfiddle.net/rSQaP/17/

測試它只是嘗試將鼠標放置及移出而紅股利的動畫。 動畫將受到藍色div上的鼠標懸停動作的影響。

Answer 1

$("#navi").mouseover(function(){ 

    $("#navi").stop().animate({width:'200px'},{queue: false,easing:"easeOutBounce",duration:1200}); 
    while($("#navi").is(":animated")){ 
    $("#navi").off('click').off('mouseover'); 
    //you can add all the events you want to ignore 
    //if it doesn't work, use unbind instead of off 
    }; 
    //re-enable these events 
    $("#navi").on('click').on('mouseover'); //here you could use bind instead of on 
});