鼠标移开工作只有一次

这是我的例子，如果你将鼠标悬停在图片，它会下滑一些文字，如果你鼠标移开，2秒后的文本将向后滑动，如果你重复，它将滑入，但从不滑回。任何想法为什么？

$(document).ready(function() { 
    $('.image').hover(function() { 
     $('.person_info').css({ 
      'left': '0px' 
     }); 
    }); 
    $('.image').mouseout(function() { 
     $(this).delay(2000).queue(function() { 
      $('.person_info').css({ 
       'left': '-165px' 
      }); 
     }); 
    }); 
});

来源

2015-03-31 zmuci

我从来没有见过lorempixel.com，喜欢它 – 2015-03-31 11:09:08

您需要添加stop(true)到mouseout使队列被清空加入向左滑动动画之前：

$(this).stop(true).delay(2000).queue(function() { 
    $('.person_info').css({ 
     'left': '-165px' 
    }); 
});

Updated fiddle

来源

2015-03-31 10:45:34

它会很好，如果它没有滑出鼠标移过文本。如果你把鼠标放在文本上，它会一直弹跳进出 – 2015-03-31 10:49:52

@JuanMendes，如果这是OP所要求的行为，那么就把'.image'选择器改成'.about_person' – 2015-03-31 10:50:48

这就是我要求的，谢谢您。而对于文本滑出，这不是一个问题，这就是为什么我使用了2秒的延迟。 :) – zmuci 2015-03-31 10:52:34

$(".image").mouseenter(function() { 
    $('.person_info').css({ 
      'left': '0px' 
     }); 
    }).mouseleave(function() { 

      $('.person_info').delay(2000).css({ 
       'left': '-165px' 
      }); 

    });

Fiddle

Documentation

来源

2015-03-31 10:47:50

如果你注意到'延迟'在你的小提琴中不起作用！ – Manoj 2015-03-31 10:52:53

对于我来说在你的例子中没有任何延迟，但Rory McCrossan解决了我的问题，无论如何，谢谢你。 :) – zmuci 2015-03-31 10:53:16

@Manoz烨，我意识到，但不想现在从'rory'复制:) – 2015-03-31 10:55:16

鼠标移开工作只有一次

回答

相关问题