在启动另一个之前停止jquery动画

时间:2015-06-12 10:56:03

标签: jquery

我的页面中有这样的内容:

http://jsfiddle.net/larini/wL3ugost/

如果在选项之间快速移动鼠标,则停止后动画仍会继续执行。

如何防止这种动画行为?

HTML:

<div id="all-tours">
  <h1>Guided Tours</h1>
  <ul>
    <li class="tour usa">
      <h2>New York</h2>
      <span class="details">$1,899 for 7 nights</span>
      <span class="per-night"><span class="price">$275</span>/night</span>
    </li>
    <li class="tour france" data-discount="99">
      <h2>Paris</h2>
      <span class="details">$1,499 for 5 nights</span>
      <span class="per-night"><span class="price">$300</span>/night</span>
    </li>
    <li class="tour uk" data-discount="149">
      <h2>London</h2>
      <span class="details">$2,199 for 5 nights</span>
      <span class="per-night"><span class="price">$440</span>/night</span>
    </li>
  </ul>
</div>

的javascript:

$(document).ready(function() {
  $('.tour').on('mouseenter', function() {
    $(this).addClass('highlight');
    $(this).find('.per-night').animate({'top': '-14px', 'opacity': '1'}, 'fast');
  });
  $('.tour').on('mouseleave', function() {
    $(this).removeClass('highlight');
    $(this).find('.per-night').animate({'top': '0', 'opacity': '0'}, 'fast');
  });
});

的CSS:

#all-tours ul li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(37, 43, 48, 0.5);
  float: left;
  min-height: 6em;
  padding: 0.5em;
  position: relative;
  vertical-align: top;
  width: 22.75%;
}
#all-tours ul li {
  width: 24.25%;
}


#all-tours ul li.highlight {
  background: rgba(255, 255, 99, 0.5);
}

#all-tours ul li .per-night {
  opacity: 0;
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  position: absolute;
  top: 0px;
  right: -13px;
}

1 个答案:

答案 0 :(得分:1)

这是你的小提琴fork。只需使用stop方法。

UPD:代码示例

$(this).find('.per-night').stop().animate({'top': '-14px', 'opacity': '1'}, 'fast');

$(this).find('.per-night').stop().animate({'top': '0', 'opacity': '0'}, 'fast');