Mouseout 只工作一次

Question

这是我的例子，如果你悬停在图片上，它会滑动一些文字，如果你鼠标移开，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

Mouseout 只工作一次

Mouseout working only once

css

jquery

mouseout