Question

在下面的演示中，我使用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);

});

Answer 1

在toggle（）之前添加对stop（）的调用，以防止叠加动画。

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

Answer 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

jQuery UI切换悬停并不总是切换

2 个答案: