Прекратить эффект затухания jquery при наведении

Я пытаюсь создать этот эффект, когда элементы div постоянно появляются и исчезают. Сложность заключается в том, что мне нужно, чтобы эти эффекты fadeIn и fadeOut останавливались при наведении курсора.

Прямо сейчас этот код, который у меня есть, не останавливает быстрое исчезновение. Что мне нужно, это переопределение? Это вообще возможно?

function animate() {
    $("#bill-items-one").fadeIn(3000);

    one = setInterval(function(){
        $("#bill-items-one").fadeOut(3000);
        $("#bill-items-one").fadeIn(3000);
    }, 6000)

    two = setInterval(function(){
        $("#bill-items-two").fadeIn(3000);
        $("#bill-items-two").fadeOut(3500);
    }, 6500)

    three = setInterval(function(){
        $("#bill-items-three").fadeIn(2000);
        $("#bill-items-three").fadeOut(4000);
    }, 6000)

    four = setInterval(function(){
        $("#bill-items-four").fadeIn(3500);
        $("#bill-items-four").fadeOut(3000);
    }, 6500)
}

animate();

$(".bill-area").hover(
    function(){
        clearInterval(one);
        clearInterval(two);
        clearInterval(three);
        clearInterval(four);
        $(".bill-item").fadeOut("fast");
    },
    function(){
        animate();
    }
);

См. также эту ссылку: http://jsfiddle.net/bKKE6/


person greener    schedule 09.03.2012    source источник
comment
Вы смотрели api.jquery.com/stop?   -  person Sean    schedule 10.03.2012


Ответы (3)


http://api.jquery.com/stop/

$(".bill-item").stop().fadeOut("fast");
person Anber    schedule 09.03.2012

Вам потребуется stop[docs]:

$(".bill-area").hover(
    function(){
        $(".bill-item").stop(true, true).fadeOut("fast");
    },
    function(){
        animate();
    }
);

Посмотреть демо

person mVChr    schedule 09.03.2012

Используйте jQuery .stop() для остановки анимации.

http://api.jquery.com/stop/

person mowwwalker    schedule 09.03.2012