JQuery анимационная функция не стабильна

Question

У меня есть простая функция анимации, она работает, но когда мышь зависает / быстро остается, она неустойчива /(или не работает должным образом). Специально в мыши оставить функцию удаления () не работает некоторое время. Быстро поработайте мышью, там вы найдете проблему

jQuery(document).ready(function(){
  jQuery('#social_link1').hover(function () {
    jQuery(this).animate({
        width: '+=130px',
    }, 200, '', function () {
       if(jQuery(this).children('span').length < 1){
                jQuery(this).append('<span>ফেইসবুকে আমরা</span>');
        }
    });


}, function () {
    jQuery(this).children('span').remove();
    jQuery(this).animate({
        width: '-=130px',
    });

});

jQuery('#social_link2').hover(function () {
    jQuery(this).animate({
        width: '+=130px',
    }, 200, '', function () {
       if(jQuery(this).children('span').length < 1){
                         jQuery(this).append('<span>টুইটারে আমরা</span>');
                 }
    });


}, function () {
    jQuery(this).children('span').remove();
    jQuery(this).animate({
        width: '-=130px',
    });

});

jQuery('#social_link1,#social_link2').mouseleave(function(){
           jQuery(this).children('span').remove();
     });
});

см. подробности https://jsfiddle.net/e2txv8a6/

Answer 1

В jquery есть также функции "mouseenter" и "mouseleave". поэтому он срабатывает только при входе в элемент и выходе из него.

но в вашем случае я бы порекомендовал делать это с чистой причиной CSS, что гораздо лучше для проблем с производительностью, а также проще в управлении.

вы можете добиться этого с помощью CSS-перехода

для этого случая я обновил вашу скрипку с переходом CSS.

-webkit-transition:width 0.5s ease-in-out;
        transition:width 0.5s ease-in-out;

см обновленную скрипку

Привет Тимми