Javascript jquery mouseenter持续开火

我有一个mousenter/mouseleave函数，可以在元素悬停时交换内容。然而，它并不是只在mouseenter上开火，而是持续不断地开火。我创建了一个JSFIDLE，希望它更容易理解

在

rotate\u start（）

和

rotate\u reset（）

函数中，您正在通过以下行触发悬停事件：

jq('.product-image-container',super_prod).attr('hover','true');

根据JQuery文档，

hover（）

方法为

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>

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');
});

JQuery:

<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>

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');
});

演示：
我尝试了这个解决方案，但似乎不起作用。我也有点困惑，这是怎么调用悬停函数的？是的，我错了-我选了这个答案，我在OP的小提琴上试了试，看起来很准确。这是设置函数调用的更好方法吗？jq（'.category products.product image container'）.hover（函数（）{rotate_start（this）；}，函数（）{rotate_reset（this）；}）；您正在设置“hover”伪属性，该属性使对象认为您正在其上悬停，从而触发鼠标指针。然后再设置一次悬停属性，一次又一次地移动。不，你会不经意间做同样的事情。你在这里交换图像的最终目的是什么？感谢你看似无限的循环