Как правильно добавить функцию обратного вызова в пользовательскую анимацию JQuery? - PullRequest
Новая
       41

Как правильно добавить функцию обратного вызова в пользовательскую анимацию JQuery?

0 голосов
/ 12 ноября 2011

Я нашел эффект дрожания в вопросе stackoverflow ( здесь )
Код, как показано ниже; 

jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
    this.each(function() {
        $(this).css("position","relative"); 
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
return this;
};

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

jQuery.fn.shake = function(intShakes, intDistance, intDuration,callback) {
    this.each(function() {
        $(this).css("position","relative"); 
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
if(callback) callback();
return this;
};

и звоните вот так 

$elem.css('borderColor','red');
$elem.shake(3,5,500,function(){
$elem.css('borderColor','#a6caf0');})

Вы можете найти пример JSFiddle здесь . (Если вы отмените функцию обратного вызова в fiddle, вы увидите, что границы становятся красными, но обратный вызов не выполняется.)
Так прямо сейчас ...

Ответы [ 2 ]

3 голосов
/ 12 ноября 2011

Вот, пожалуйста: 

$.fn.shake = function ( times, distance, duration, callback ) {
    return this.css({ position: 'relative' }).each( function () {            
        for ( var i = 0, t = duration / times; i < times; i+= 1 ) {
            $( this ).
                animate({ left: -distance }, t / 3 ).
                animate({ left:  distance }, t / 3 ).
                animate({ left:         0 }, t / 4 );
        }

        $( this ).show( callback );
    });
};

А потом ... 

$( button ).click( function () {
    $( field ).addClass( 'shaking' ).shake( 5, 10, 500, function () {
        $( this ).removeClass( 'shaking' );
    });
});

Демонстрационная версия: http://jsfiddle.net/f96ff/8/

Таймерне нуженВы просто добавляете функцию callback в очередь эффектов с помощью (нейтрального) метода .show().Это гарантирует, что callback вызывается только после , когда все анимации (из очереди) завершены.

Кроме того, я рекомендую класс CSS для состояния "встряхивания": 

.shaking { border-color: red; }

Также обратите внимание, что я значительно переработал код для $.fn.shake.Я рекомендую вам потратить несколько минут вашего времени, чтобы проанализировать, как я улучшил код.

1 голос
/ 12 ноября 2011

Вы должны установить тайм-аут, вы не можете просто вызвать обратный вызов напрямую, потому что функция анимации jquery является асинхронной.Таким образом, он будет выполнять обратный вызов напрямую.Что можно сделать, это установить тайм-аут на время полной анимации.

Вы также не можете просто использовать обратный вызов функции animate в jQuery, потому что вы используете несколько.

Решение: http://jsfiddle.net/f96ff/2/

...