Remove id after animation in jquery
I want to remove id
from the image after the animation finishes. 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 doesn't work because it removes the ID before the animation starts, but I want to remove the id
#deer from the image and add ("open") after execution .animate()
.
so here i did a jsfiddle: http://jsfiddle.net/67oe1jvn/45/ . notice the left image when scrolling down below HELLO h1. the thing i want to achieve is when i get to the second section i would like both images to slide in the view with the "transition: all 1.2s ease-out" directive; And whenever a section changes, they slip out of view, so they don't notice.
source to share
First of all, as pointed out in the comments, you don't want to remove the id attribute of the DOM element, which is bad practice. Rather, add and remove a specific class for example. (your code works pretty much the same if you change #deer
to .deer
)
Regarding this, when the animation is done: see the jQuery docs on animate , in the second, options
parameter it actually takes a callback to start when the animation is complete:
Full function: If supplied, the full callback function is triggered after the animation ends. This can be useful for combining different animations in sequence. The callback does not send any arguments, but this is set for an animated DOM element. If multiple elements are animated, the callback is executed once for each element, rather than once for the animation as a whole.
This means that you can write something like:
$('#slidetext1 .deer').animate({left: "0"}, {complete: function(){
this.removeClass('deer');
}})
Note: it's doubtful if 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 is complete.
source to share