Mouseout 只工作一次答案

【问题标题】：Mouseout working only onceMouseout 只工作一次
【发布时间】：2023-09-23 09:02:01
【问题描述】：

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

【问题讨论】：

我从未见过 lorempixel.com，喜欢它

标签： jquery css mouseout

【解决方案1】：

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

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

  });

Fiddle

Documentation

【讨论】：

如果您注意到 delay 在您的小提琴中不起作用！
在您的示例中对我来说没有延迟，但是 Rory McCrossan 解决了我的问题，无论如何，谢谢您。 :)
@Manoz 是的，我意识到了这一点，但现在不想从 rory 复制 :)

【解决方案2】：

您需要在mouseout中添加stop(true)，以便在添加左滑动画之前清除队列：

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

Updated fiddle

【讨论】：

如果鼠标移过文字时不滑出就好了。如果您将鼠标停留在文本上，它会不断跳进跳出
@JuanMendes 如果这是 OP 要求的行为，那么只需将 .image 选择器更改为 .about_person
这是我要求的，谢谢。对于文本上的幻灯片，这不是问题，这就是我使用 2 秒延迟的原因。 :)
@RoryMcCrossan 仅将选择器更改为.image 不会在您将鼠标从图像上移出时滑出。你可以使用relatedTarget来避免问题jsfiddle.net/a08fLdte/6