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已