懸停時jQuery滑塊停止

Question

我目前正在研究一個小的jQuery元素，但是在使用clearInterval時遇到了一些麻煩。

我用一個例子做了一個jsFiddle我正在做的事情： http ： //jsfiddle.net/eWTSu/

正如你所看到它旋轉正常但當我將鼠標懸停在導航按鈕上時，旋轉不會停止。 還有旋轉順序的問題。 旋轉為div1，div2，div3，div4和repeat。 但是當我在第一個div上旋轉時我將第三個按鈕懸停，它會在第三個div上方加載第二個div。

有沒有人對我有好的建議？

Answer 1

試試這個（參見DEMO ）：

jQuery(document).ready(function () {
    $('.greenC, .blueC, .orangeC').hide();

    $('.nav li').hover(function () {
        var liClass = $(this).attr('class');

        $('.slider').hide();
        $('.' + liClass + 'C').show();
    });

    (function () {
        var interval_function = function () {
            jQuery('#header_slider > div:first')
                .hide()
                .next()
                .show()
                .end()
                .appendTo('#header_slider');
        };

        var interval = setInterval(interval_function, 1000);

        $('.nav li').hover(function () {
            clearInterval(interval);
        }, function () {
            interval = setInterval(interval_function, 1000);
        });
    }());
});​