我的页面中有这样的内容:
http://jsfiddle.net/larini/wL3ugost/
如果在选项之间快速移动鼠标,则停止后动画仍会继续执行。
如何防止这种动画行为?
<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>
$(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');
});
});
#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;
}
答案 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');