приостановка анимации jquery в середине с использованием задержки.возникли некоторые проблемы

Question

    $('textarea.contact').click(function(){
    $(this).animate({"backgroundPosition": "+=350 -=150"}, 500).delay(500);
    $(this).animate({"backgroundPosition": "+=350 -=150"}, 500);
});

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

Answer 1

Хакерский подход, но как насчет анимации без движения:

$( this )
    .animate({"backgroundPosition": "+=350 -=150"}, 500)
    .animate({"backgroundPosition": "+=0 +=0"}, 500)
    .animate({"backgroundPosition": "+=350 -=150"}, 500);

jsfiddle с другими правилами, потому что я не хотел найти фоновое изображение.

Answer 2

Возможно, использовать функцию обратного вызова следующим образом:

$(this).animate({"backgroundPosition": "+=350 -=150"}, 500, function () {
    $(this).delay(500).animate({"backgroundPosition": "+=350 -=150"}, 500);
});

Похоже, что CSS для фонового изображения не сохраняется после первоначальной анимации, поэтому, возможно, установите CSS в функции обратного вызова:

$(this).animate({"backgroundPosition": "+=350 -=150"}, 500, function () {
    $(this).css({"backgroundPosition": '...'});
    $(this).delay(500).animate({"backgroundPosition": "+=350 -=150"}, 500);
});