jQuery 问题 - mouseover/mouseout 太快

Posted 2023-03-04

【中文标题】jQuery 问题 - mouseover/mouseout 太快

【英文标题】：jQuery issue - mouserover/mouseout too fast

【发布时间】：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。

【参考方案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-itemoverflow:hidden;position:relative;color:#fff;cursor:pointer
.riddle-item:hover .riddle-item-linkleft:0
.riddle-item-linkborder: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--goldborder-color:#86693d;background-color:#514025

再次感谢您！