pausing a jquery animation in the middle using delay. having some issues

Question

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

I'm using a background position library in order to animate a background. I would like to have the background slide half way. Pause in the middle, and then continue on it's way. unfortunately when I write the code this way the animation moves half way. pauses in the middle, and then restarts the animation from the beginning rather than incrementing. anyone know why?

What happens when you combine both lines of code into a single chain? — Blazemonger, Sep 13 '11 at 20:56

score 0 · Accepted Answer · answered Sep 13 '11 at 20:58

0

Perhaps use a callback function like so:

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

It kinda sounds like the css for the background image is not being saved after the initial animation, so maybe set the css in the callback function:

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

answered Sep 13 '11 at 20:58

Jasper

75,717
14
151
146

$(this).css({"backgroundPosition": '...'}); this wasn't necessary. But the rest of the code did the trick. Interesting jquery doesnt save the value without a callback function in place. multiple click events can increment an animation like this. However one click event cant without a callback function. interesting. – ionfish Sep 13 '11 at 21:03
What plugin are you using to animate the background? – Jasper Sep 13 '11 at 21:08

score 0 · Answer 2 · answered Sep 13 '11 at 21:06

Sort of a hacking approach, but what about animating without moving:

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

jsfiddle with different rules, because I didn't want to find a background image.

pausing a jquery animation in the middle using delay. having some issues

2 Answers2