Question

我目前正在开发一个带下拉功能的菜单。下拉菜单使用 jQuery UI ＆＃34; show（＆＃39; slide＆＃39;，...）＆＃34;使用鼠标中心功能并使用＆＃34;隐藏（＆＃39; slide＆＃39;，...）功能向后滑动。

以下是我汇总的代码片段，用于演示我的问题，当鼠标快速移动到 Text 元素上时会发生此问题。

我尝试过使用.stop（true，true）和.dequeue（）但没有成功。我觉得问题出在 $（this）.children（）调用上。请注意，我对类和子项的使用是故意的，因为在这种情况下它是不必要的，但在我的项目中需要。使用streight $（＆lt; #myElement＆gt;）调用它似乎可以正常工作。

我感谢任何有关这方面的建设性反馈。我花了整整一天时间进行谷歌搜索/试错和/解决此问题。

＆＃13;

   $(".element").mouseenter(function(){
      $(this).children(".toggleme").show("slide", {direction: "left"}, 100);
   }).mouseleave(function(){
      $(this).children(".toggleme").hide("slide", {direction: "left"}, 100);
   });

＆＃13;

<div class="element"> 
   <span> TEST </span>
   <div class="toggleme" style="width:100px; height:100px; background-color: red; display: none;">
      I appear and vanish!
   </div>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

＆＃13;

Answer 1

你最好做这样的事情：

// handle the mouse entering
jQuery(document).on('mouseover', ".element", function () {
    $(this).children(".toggleme").show("slide", {direction: "left"}, 100);
});
// handle the mouse leaving
jQuery(document).on('mouseout', ".element", function () {
    $(this).children(".toggleme").hide("slide", {direction: "left"}, 100);
});

而不是像你一样把它链接起来。

参考

或者，您也可以使用jQUery.mouseleave()，但上述内容应该按照您的要求执行。

Answer 2

假设您的问题是红色没有隐藏在mouseleave上，请换入$（document）.ready（）;

   $(document).ready(function() {
      $(".element").mouseenter(function(){
        $(this).children(".toggleme").show("slide", {direction: "left"}, 100);
      }).mouseleave(function(){
        $(this).children(".toggleme").hide("slide", {direction: "left"}, 100);
      });
   });

您还需要导入jQuery UI

http://plnkr.co/edit/qC1dWlTG7pu1QR4fW8h0?p=preview

Answer 3

通常我会在这里推荐slideToggle方法。但是，由于你想要左边的动画，似乎animate符合要求。

$(".element").mouseenter(function(){
    $(this).children(".toggleme").animate({width: 'toggle'});
    }).mouseleave(function(){
      $(this).children(".toggleme").animate({width: 'toggle'});
});

这是Fiddle。

Answer 4

这是你想要完成的吗？

   $(".element").children("span").mouseenter(function(){
      $(this).siblings(".toggleme").show("slide", {direction: "left"}, 100);
   });
   $(".element").children("div").mouseleave(function(){
      $(this).hide("slide", {direction: "left"}, 100);
   });

<div class="element"> 
   <span> TEST </span>
   <div class="toggleme" style="width:100px; height:100px; background-color: red; display: none;">
      I appear and vanish!
   </div>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Answer 5

$(".element").mouseenter(function(){
      $(this).children(".toggleme").show("slide", {direction: "left"}, 100);
   }).mouseleave(function(){
      $(this).children(".toggleme").hide("slide", {direction: "left"}, 100);
   });

.element {display: inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element"> 
   <span> TEST </span>
   <div class="toggleme" style="width:100px; height:100px; background-color: red; display: none;">
      I appear and vanish!
   </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

这可以按预期工作，因为.element是一个块元素，因此它占用了页面宽度的100％。即使你认为你不再徘徊在元素上，你仍然可以使用光标。解决方案是将.element设置为display: inline-block;。

hide（）在show（）之后不立即工作

5 个答案: