jQuery 问题 - mouseover/mouseout 太快答案

【问题标题】：jQuery issue - mouserover/mouseout too fastjQuery 问题 - mouseover/mouseout 太快
【发布时间】：2021-12-20 21:33:42
【问题描述】：

我想在同一个 div 上有一个幻灯片（例如，你可以在这里看到的 2 个框：https://braintogain.fr/）

我试过这段代码，但我有一个问题...当鼠标移得太快时，第二个事件被跳过...并且黄色框保持...

我希望它在鼠标悬停（或 mouseenter）时出现，而在 mouseout（或 mouselave）时隐藏。

这是我的代码：https://jsfiddle.net/976mLshn/1

谢谢:)

.item_menu {
  width: 200px;
  height: 100px;
  background: red;
}

.titre {
  width: 200px;
  height: 100px;
  background: yellow;
}

li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

<li id='category_1'>
  <div class='item_menu'>
    <div class='titre' style='display:none;'>menu 1 title</div>
  </div>
</li>
<li id='category_2'>
  <div class='item_menu'>
    <div class='titre' style='display:none;'>menu 2 title</div>
  </div>
</li>

<script>
  $('.item_menu').mouseover(function() {
    $(this).children('.titre').show('slide', {
      direction: 'right'
    });
  });

  $('.item_menu').mouseout(function() {
    $(this).children('.titre').hide('slide', {
      direction: 'right'
    });
  });
</script>

【问题讨论】：

整个 UI 看起来有很多 bug，当使用 find 而不是 children 时效果已经好很多了，这很奇怪：jsfiddle.net/aLhj9pwk
您可以轻松创建预期的行为而无需额外的库，只需使用transition 甚至设置without 任何JS，您作为示例的页面仅使用CSS。
jQueryUI 1.9 于 2012 年发布。我建议更新您的版本。与 jQuery 相同。您应该可以毫无问题地转到 3.x。

标签： jquery events mouseover skip mouseout

【解决方案1】：

您可以完成动画，然后调用下一个动画。

另外 mouseenter 和 mouseleave 在这种情况下更准确

$('.item_menu').mouseenter(function(){
    $(this).children('.titre').show('slide', {direction:'right'});
});

$('.item_menu').mouseleave(function(){
    $(".titre").stop(true,true);
    $(this).children('.titre').hide('slide', {direction:'right'});
});

更新： 我设法找到了一个解决方案，对其进行了一些修改，仅 CSS 并且完全按预期工作。

检查下面的小提琴

http://jsfiddle.net/tm9u4fhd/

只需根据您的需要修改 CSS，它就像一个魅力！

原答案：CSS 3 slide-in from left transition

【讨论】：

好的，我明白了。它转到动画的末尾并执行下一个。当我离开而不是结束时，是否可以“停止”动画？我的意思是，当我鼠标离开时，动画真的停在它实际所在的像素处，然后再做下一张幻灯片返回？对不起我的英语：p
我明白你的意思。我试图用stop(false,false) 函数来解决它，但动画stop(false,false) 函数由于某种原因阻止了进一步的动画......
老版本的 jQuery UI 好像不太好用。
我正在使用 wp-enqueue wordpress。我应该尝试使用另一个 jQuery 版本吗？
如果你使用最新的版本，肯定会好很多。但是您不需要任何 JS 来实现这一点，您链接到的示例页面也不需要。

【解决方案2】：

回复，

谢谢@你们。

我尝试只使用 CSS，它可以工作。这是我的提议：https://jsfiddle.net/vswoghm9/

<div style='width: 330px;float:left;padding:10px;'>
        <div class='riddle-item riddle-item--gold'>
            <div style='background-color: red;height:100px;'>
                        
                            <div style='text-align:center;'>Back</div>
                            

            </div>
                            <a class='riddle-item-link riddle-item-link--gold' href='#'>
                                <div class='riddle-item-link-logo'>
                                    Front
                                </div></a>
        </div>
    </div>

和 CSS ：

.riddle-item{overflow:hidden;position:relative;color:#fff;cursor:pointer}
.riddle-item:hover .riddle-item-link{left:0}
.riddle-item-link{border:transparent 3px solid;position:absolute;z-index:2;left:100%;top:0;height:100%;width:100%;text-align:center;-webkit-transition:left .2s ease-in-out;-moz-transition:left .2s ease-in-out;-ms-transition:left .2s ease-in-out;-o-transition:left .2s ease-in-out;transition:left .2s ease-in-out;cursor:pointer;text-decoration:none!important;justify-content:center;align-items:center}
.riddle-item-link--gold{border-color:#86693d;background-color:#514025}

再次感谢您！

【讨论】：