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

jquery中还有"mouseenter"和"mouseleave"函数。所以它只在进入元素并离开元素时触发。

但是在你的情况下，我会建议使用纯css，因为性能问题更好，而且更容易管理。

您可以使用css transition

来实现这一目标

对于那种情况，我用css过渡更新了你的小提琴。

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

see updated fiddle

问候timmi

jquery动画功能不稳定

1 个答案: