我有一个 mousenter/mouseleave 函数,当鼠标悬停在元素上时,它会换出内容。然而,它不是只在 mouseenter 上触发,而是似乎一直在持续触发。我创建了一个 jsfiddle here所以希望它会更容易理解。
最佳答案
在您的 rotate_start()
和 rotate_reset()
函数中,您通过此行触发悬停事件:
jq('.product-image-container',super_prod).attr('hover','true');
根据 JQuery 文档,hover()
方法绑定(bind)了 mouseenter
和 mouseleave
事件的处理程序。您基本上是在无意中应用递归,因为 hover
在鼠标移动时触发。
一个简单的解决方法是将 .attr('hover','true');
替换为 .data('hover',true);
这是一个可扩展的解决方案,应该可以实现您的目标:
HTML:
<div class="item">
<ul>
<li>
Main product photo
</li>
<li>
Alternate product photo 1
</li>
<li>
Alternate product photo 2
</li>
<li>
Alternate product photo 3
</li>
</ul>
</div>
CSS:
.item {
width:200px;
height:200px;
background-color:#F0F0F0;
border:1px solid #666;
}
.item ul li {
display:none;
}
JQuery:
var jq = jQuery.noConflict();
var timers = [];
var interval_seconds = 2;
jq('.item').mouseenter(function() {
// Scope this
var _this = jq(this);
// Self-executing function
(function cycle() {
// Recursive setTimeout accommodates for animation time - setInterval wont
timers['item'] = setTimeout(function() {
// Grab the currently visible photo, and the next photo
var _this_li = _this.find('li:visible');
var _next_li = _this_li.next();
// If there is no next photo, cycle back to first photo
if (_next_li.length == 0) {
_next_li = _this.find('li:first-child');
}
// Animate the rotation
_this_li.fadeOut('slow', function() {
_next_li.fadeIn('slow', function() {
// Recursion
cycle();
});
});
}, interval_seconds * 1000);
})();
});
jq('.item').mouseleave(function() {
// Stop the recursive setTimeout
clearTimeout(timers['item']);
// Scope this
var _this = jq(this);
// Grab the first photo in the list
var _first_li = _this.find('li:first-child');
// If the first photo in the list is not the currently visible photo, make it so.
if (_first_li.not(':visible')) {
_this.find('li:visible').fadeOut('slow', function() {
_first_li.fadeIn('slow');
});
}
});
jq(function() {
// Show the first photo on load
jq('.item').find('li:first-child').fadeIn('slow');
});
关于javascript - jquery mouseenter 连续触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6927474/