Question

I have a jQuery function func1 that works fine on document ready:

$(document).ready(function ()
{
   //func1 description is here
   ...
   $(func1);
}

also I have

$(function ()
{
            $("#my-ul a").hover(function ()
            {
               //do something on my-ul a hover
            });
            $("#my-ul a").mouseleave(function ()
            {
               //do something on my-ul a mouseleave
            });
});

and it works fine.

What I want as well is to stop func1 on my-ul a hover and start it again on my-ul a mouseleave (like you didn’t hover at all).

Browsing stackoverflow didn’t help me with the answer. I believe .stop() function should be used, but I had no luck to use it properly for my example.

Thank you.

Update:
Here is an jsFiddle example and I want to stop changing text when hovered on link and start changing the same way onmouseleave back.

Answer 1

You could not cancel delay, you need to use setTimeout or serInterval instead.

The code (THE DEMO):

$(document).ready(function () {
    var terms = ["span_aaa", "span_bbb", "span_ccc", "span_ddd", "span_eee", "span_fff"],
        i = 0,
        intervalId = null;

    function rotateTerm() {
        $("#text-content").fadeOut(200, function () {
            $(this).text($('#text-slider .' + terms[i]).html() + i).fadeIn(200);
        });
        $("#title-content").fadeOut(200, function () {
            $(this).text($('#title-slider .' + terms[i]).html() + i).fadeIn(200);
            i == terms.length - 1 ? i = 0 : i++;
        });
    }
    rotateTerm();
    intervalId = setInterval(rotateTerm, 2000);
    $('#stop-on-hover').hover(function () {
        if (intervalId) {
            clearInterval(intervalId);
        }
    }, function () {
        intervalId = setInterval(rotateTerm, 2000);
    });
});​