Question

I’m currently working on a small jQuery element but having some trouble with clearInterval.

I made a jsFiddle with an example what I’m working on: http://jsfiddle.net/eWTSu/

As you can see it rotates fine but when I hover over a navigation button the rotation does not stop. Also there’s a problem with the order of the rotation. The rotation goes div1, div2, div3, div4 and repeat. But when I hover of the third button while the rotation is on the first div it loads the second div on top of the third.

Does anyone have a good tip for me?

Answer 1

Try this (See 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);
        });
    }());
});​