在连续的jQuery内容滑块中出现的mouseover和mouseout事件问题

Question

我尝试在jQuery中构建一个连续的内容滑块。

如果你不把鼠标悬停在它上面，那么它就会正常工作，它会滑动(尽管我觉得我让它发生的方式不对)。

当你悬停时，它会停止，但只有2秒。正如您所想象的，它应该保持停止状态，直到光标被移除。也许间隔没有清除好?

一般来说，当你开始悬停/取消悬停时，整个东西都不能正常工作。

下面是我的插件的演示:http://jsfiddle.net/T5Gt3/

(function ($) {
$.fn.productSlider = function(options) {
    var defaults = {
        speed: 2000
    };
    var config = $.extend(defaults, options);
    this.each(function() {
        var $this = $(this),
            $scrollable = $this.find('#content-product-slider-inner'),
            timeLeft;
        function animateScrollable() {
            $scrollable.animate({ left: '-120px' }, config.speed, 'linear', function() {
                $scrollable.css({ left: '0px' }).find('a:first-child').remove().appendTo($scrollable);
            });
        };
        animateScrollable();
        var timer = setInterval(animateScrollable, config.speed);
        $scrollable.mouseover(function() {
            $scrollable.stop();
            clearInterval(timer);
        });
        $scrollable.mouseout(function() {
            animateScrollable();
            var timer = setInterval(animateScrollable, config.speed);
        });
    });
    return this;
};
})(jQuery);

Answer 1

$(".event_list_inner_wrapper").live({
    mouseenter: function () {
        $(this).find('.front_side').fadeOut(600).hide();
        $(this).find('.back_side').fadeIn(600).show();
    },
    mouseleave: function () {
        $(this).find('.back_side').fadeOut(600).hide();
        $(this).find('.front_side').fadeIn(600).show();
    }



});

这是我用于一个项目的代码，类似于你的描述。基本上，绑定鼠标事件，然后执行您的操作。