текст нарушает mouseover

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}); 
    }); 

Этот же код есть в тексте-div.

Вы можете проверить его здесь http://jsfiddle.net/rSQaP/17/

Просто попробуйте и наведении курсора мыши MouseOut в то время как красный ДИВ оживляет. На анимацию повлияет действие мыши на синем 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 
});