jQuery UI 切换悬停不总是切换答案

【问题标题】：jQuery UI Toggle Hover Not Alway TogglingjQuery UI 切换悬停不总是切换
【发布时间】：2015-06-24 00:26:38
【问题描述】：

在下面的演示中，我使用 jQuery UI 切换来在悬停时显示标题，而不是悬停在该图像上时隐藏。虽然它最初似乎有效。如果您将鼠标快速移动到框上并移到另一个框上，则以前的框标题有时会保持打开而不是隐藏。是否有解决此问题的方法，例如需要更大/更小的延迟或其他方法来保证当您的鼠标不在图像上时标题始终会消失？

http://codepen.io/anon/pen/BNdggv

$( ".product" ).hover(function() {
  $(this).find( ".product-caption.odd" ).toggle( "slide",{direction:"left"},500);
  $(this).find( ".product-caption.even" ).toggle( "slide",{direction:"right"},500);

});

【问题讨论】：

请在问题本身中包含所有相关代码。这包括您尝试针对其运行 jQuery 的 HTML（相关 HTML 部分）。这很重要，因为如果 codepen.io 消失或你的链接这个问题对未来的读者完全没用。
我相信答案只与这段 javascript 有关，但如果答案最终涉及对 HTML 或 CSS 的更改，我当然可以在标记为正确之前回答该问题的特定代码。
Please read the help.

标签： jquery jquery-ui

【解决方案1】：

在 toggle() 之前添加对 stop() 的调用，以防止动画堆积。

$(this).find( ".product-caption.odd" ).stop().toggle( "slide",{direction:"left"},500);

【讨论】：

就是这样！我新它会很简单。还在学习很多这些基础知识。非常感谢。我会在所需的最短时间后将其标记为正确。
如果您的项目（支持的浏览器）允许，您可以使用 CSS 实现非常相似的动画。
我认为 CSS 可能是更好的解决方案，因为在 jquery 中它会在几次快速鼠标移动后不同步。我试过stop，但没有建议，因为它在这些条件下失败了。虽然在正常交互下会很好。

【解决方案2】：

尝试使用.stop()

$(".product").hover(function() {
  $(this).find(".product-caption.odd").stop(true, true).toggle("slide", {
    direction: "left"
  }, 500);
  $(this).find(".product-caption.even").stop(true, true).toggle("slide", {
    direction: "right"
  }, 500);
});

body {
  margin: 0;
  background-color: gray;
  padding: 0;
}
.product-caption {
  width: 50%;
  height: 230px;
  background: #fff;
  float: left;
  text-align: center;
  display: none;
}
.product-caption.even {
  float: right;
}
.product-caption h3 {
  color: #5C5C5C;
  text-transform: uppercase;
}
.product-caption p {
  color: #9B9B9B;
}
.product-caption a {
  text-transform: uppercase;
  color: #F8981D;
  font-weight: bold;
  text-decoration: none;
}
.product {
  background-image: url(https://placeholdit.imgix.net/~text?txtsize=52&txt=554%C3%97230&w=554&h=230);
  width: 554px;
  height: 230px;
}
.btn {
  border: 1px solid red;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="product">
  <div class="product-caption odd">
    <h3>One</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    <p><a class="btn btn-default" href="#">Link</a>
    </p>
  </div>
</div>

<hr />

<div class="product">
  <div class="product-caption even">
    <h3>Two</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    <p><a class="btn btn-default" href="#">Link</a>
    </p>
  </div>
</div>

<hr />

<div class="product">
  <div class="product-caption odd">
    <h3>Three</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    <p><a class="btn btn-default" href="#">Link</a>
    </p>
  </div>
</div>

http://codepen.io/anon/pen/yNPXeE

【讨论】：

谢谢，就是这样。另一个用户在您之前发布了停止建议，否则会将您的建议标记为正确。