remove an id after an animation in jquery [closed]

Question

I'd like to remove an id from an image after its animation is completed. I have this in my code:

if(index == 1 && direction =='down'){
    $('#slidetext1 #rock').animate({right:"0"});
    $('#slidetext1 #deer').animate({left: "0"}).addClass('open').removeAttr('id');
}

It's not working because it removes the id before even starting the animation, but what I want to do is to remove the id #deer from the image and add ('open') after the .animate() has been executed.

so here i made a jsfiddle: http://jsfiddle.net/67oe1jvn/45/ . pay attection to the left image as you scroll down under the HELLO h1. the thing i want to achive is: when i get to the second section, i'd like to see both of the images slide in the view with the directive "transition:all 1.2s ease-out;" AND whenever the section gets changed make them slide out of the view with a faster transiction, so it won't been noticed that much.

Answer 1

First of all, as pointed out in the comments, you don't want to remove the id attribute of a DOM element, that's bad practice. Rather, add and remove a specific class, for example. (your code works almost the same if you change #deer to .deer)

As for doing this when the animation is done: see the jQuery docs on animate, in its second, options param it actually accepts a callback to run when the animation is over:

Complete Function: If supplied, the complete callback function is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, the callback is executed once per matched element, not once for the animation as a whole.

Which means you can write something like:

$('#slidetext1 .deer').animate({left: "0"}, {complete: function(){
    this.removeClass('deer');
}})

Note: it's doubtful whether this is the best way to structure your animation, I'm just answering the original question you had: how to do something after the animation has finished.