остановка функции с анимацией в ней с помощью jquery / javascript

Question

Я создаю пользовательский слайдер изображений для сайта, и я застрял на базовом принципе.У меня есть рекурсивная функция, которая запускается при загрузке страницы.Мне интересно, как немедленно остановить функцию, а затем перезапустить ее в начале с помощью щелчка мышью.

В следующем примере с jsfiddle может кто-нибудь сказать мне, как заставить красный квадрат начать с поля 0, а затем снова запустить функцию bounce (), когда нажимается синяя или зеленая кнопка?

например: если красный квадрат направлен вправо, когда нажата кнопка «синий», как я могу сделать так, чтобы квадрат отображался в поле margin-left: 0, а затем снова запустил функцию bounce ()?

Большое спасибо.http://jsfiddle.net/hZ6xZ/7/

Answer 1

Это просто, в jQuery есть функция с именем stop (), которая останавливает анимацию, а также поддерживает переход в конец анимации и очистку очереди.

Просто сформируйте свою функцию возврата, как это:

Подробнее об остановке: http://api.jquery.com/stop/

Answer 2

Fiddle - http://jsfiddle.net/mrtsherman/hZ6xZ/9/

Используйте остановку jQuery (), чтобы убить текущую анимацию.Также взгляните на цепочку методов, которая более эффективна, чем многократный вызов $ ('# box').

$('#blue').click(function(){
    repeat = clearTimeout(repeat);
    $('.box')
        .stop()
        .css({'background-color':'blue'})
        .css({'margin-left':'0'});

    bounce();
});