jquery动画功能不稳定

Question

我有一个简单的动画功能，它的工作，但当鼠标悬停/离开快速其不稳定/（或不正常工作）。特别在鼠标离开remove（）函数不工作一段时间。不要快速的鼠标在那里工作，你会发现这个问题

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

也有"mouseenter"和"mouseleave"功能的jQuery。所以它只会在进入元素和离开元素时触发。

但在你的情况下，我会建议使用纯CSS的原因，这对性能问题更好，它也更容易管理。

可以实现通过使用css transition

对于这种情况下，我有一个CSS过渡更新您的提琴。

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

see updated fiddle

问候Timmi已