Mouseout仅工作一次

Question

http://jsfiddle.net/a08fLdte/

这是我的例子，如果你将鼠标悬停在图像上，它会滑动一些文本，如果你鼠标移开，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'
            });
        });
    });
});

Answer 1

您需要将stop(true)添加到mouseout，以便在添加左侧幻灯片动画之前清除队列：

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

Updated fiddle

Answer 2

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

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

  });

Fiddle

---

Documentation