jQuery Пользовательский обратный вызов для .animate()

Я пытаюсь создать пользовательский обратный вызов для функции jQuery .animate(). Я ограничиваюсь JQuery 1.4.2 и на основе моего пользовательский вызова в этой статье [Дэн Свитцер] [1]jQuery Пользовательский обратный вызов для .animate()

(function ($){ 
    var oldAnimate = $.fn.animate; 
    $.fn.animate = function(){ 
     this.trigger('animate.before', arguments); 
     var animateResult = oldAnimate.apply(this, arguments); 
     this.trigger('animate.after', arguments); 
     return animateResult; 
    }; 
})(jQuery || {}); 

$('#ID').bind('animate.after', function(){ 
    //Do Something 
});

Однако, когда я запускаю этот код, мое «// Выполняет что-то» не вызвать. Я также попытался следующие [статья Дэйва Уорда] [1], а также, с помощью этого:

var oldAnimate = jQuery.animate; 

jQuery.animate = function() { 
    if (typeof animate.before === 'function') 
    animate.before.apply(this, arguments); 
    var animateResult = oldAnimate.apply(this, arguments); 
    if (typeof animate.after === 'function') 
    animate.after.apply(this, arguments); 
    return animateResult; 
};

Я не знаю, где я буду неправильно.

источник

2013-08-21 Sam G. Daniel

Логически ваш код не имеет большого смысла. Ваше событие «после» произойдет до завершения анимации. Первый фрагмент ближе к правильному, второй фрагмент неправильный, потому что нет метода 'jQuery.animate'. –

Первым шагом должно быть упрощение кода. Вот первый шаг: http://jsfiddle.net/eayTB/ Здесь вы увидите, что .before и .after aprt теряются из-за того, что вы определяете пространство имен, и я серьезно сомневаюсь, что вы действительно хотелось, чтобы существовало пространство имен. –

@KevinB Я вижу ошибку, которую я сделал со вторым фрагментом, он должен быть «jQuery.fn.animate» вместо «jQuery.animate». Для пространства имен было бы лучше использовать 'onBeforeAnimate' и 'onAfterAnimate' вместо этого? –

Итак, вы обнаружили, что ваш код не работает. Первый шаг - упростить его и проверить отдельные части отдельно. Давайте начнем с события.

$("#ID").bind("animate.before animate.after",function(e){ 
    console.log(e.type); 
}).trigger("animate.before").trigger("animate.after");

Это приводит к двум событиям, вызванным с типом, равным «оживить» оба раза. Для того, чтобы это сказать animatebefore и анимировать после замены . с :

$("#ID").bind("animate:before animate:after",function(e){ 
    console.log(e.type); 
}).trigger("animate:before").trigger("animate:after");

Теперь мы правильно получить animate:before и animate:after. Теперь, когда мы знаем, что наше мероприятие работает, давайте связать это с методом анимации.

$("#ID").bind("animate:before animate:after",function(e){ 
    console.log(e.type); 
}); 

var oldanim = $.fn.animate; 
$.fn.animate = function() { 
    this.trigger("animate:before"); 
    oldanim.apply(this,arguments); 
    this.trigger("animate:after"); 
}; 

$("#ID").animate({"width":"200px"},2000,function(){ 
    console.log("animation complete"); 
});

Это работает !!! тем не менее, вы заметите довольно быстро, что после события происходит медленнее, чем должно быть. Это связано с тем, что метод animate выполняется асинхронным способом с использованием setTimeouts, поэтому код продолжает работать. У меня пока нет никаких предложений относительно того, как исправить это из-за того, что у нас нет отложенных объектов до 1,5. Вы можете переопределить полную функцию, но вы должны принять во внимание, что ее можно подключить двумя разными способами.

источник

2013-08-21 17:50:29

Вот демонстрация этого: http://jsfiddle.net/EdqDW/1/ разница во времени не кажется такой плохой. –

Как насчет опции complete? Я предполагаю, что это было доступно в jQuery 1.4.1

$('#id').animate({ 
    properties.. 
}, { 
    complete: function() { 
     // doStuff 
    } 
});

источник

2013-08-21 17:36:35 jukempff

jQuery Пользовательский обратный вызов для .animate()

ответ

Смежные вопросы