悬停时jQuery滑块停止

时间:2012-07-31 12:11:02

标签: javascript jquery animation hover

我目前正在研究一个小的jQuery元素,但是在使用clearInterval时遇到了一些麻烦。

我用一个例子来制作一个jsFiddle:http://jsfiddle.net/eWTSu/

正如您所看到它旋转正常但当我将鼠标悬停在导航按钮上时,旋转不会停止。还有旋转顺序的问题。旋转为div1,div2,div3,div4和repeat。但是当我在第一个div处旋转时,我将第三个按钮悬停,它将第二个div加载到第三个div之上。

有人对我有好的建议吗?

1 个答案:

答案 0 :(得分:2)

试试这个(见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);
        });
    }());
});​