我想让一个函数在mouseenter上执行一次,然后在mouseleave上执行,我想让该元素返回其状态。

我的代码产生一个无限循环。鼠标进入,元素无限翻转,直到我的鼠标离开。

$(document).ready(function() {
    var flipfunc = function() {
        var elem = $(this);
        if (!elem.data('flipped')) {
            elem.flip({
                direction: 'lr',
                speed: 250,
                onBefore: function() {
                    elem.html(elem.siblings('.sponsorData').html());
                }
            });
            elem.data('flipped', true);
            elem.addClass('sponsorFlipped');
            //elem.unbind('mouseenter', flipfunc);
        }
        else {
            elem.revertFlip();
            // Unsetting the flag:
            elem.data('flipped', false)
            //elem.unbind('mouseleave', rflipfunc);
        }

    }

    $('.sponsorFlip').bind('mouseenter', flipfunc);

    //$('.sponsorFlipped').bind('mouseleave', rflipfunc);

});


我尝试了许多解决方案,但看不到问题出在哪里...

最佳答案

mouseenter事件翻转时会触发,因此您必须检测鼠标是否移出。这是一种方法。

$(window).bind('mousemove', function(e){
    if($(e.target).hasClass("sponsorFlip")){
        mouseMovedOut = false;
    }else{
        mouseMovedOut = true;
    }
});


在此处查看演示(仅在FF中测试):http://jsfiddle.net/tgg33/7/

现在,只有当鼠标进入时,div才会翻转。如果要在鼠标离开时将其翻转回去,则必须添加mouseleave处理程序。

09-30 16:45
查看更多