We Keep Coding

How to detect when all animations have stopped?

I'm using this code to stop simultaneous animations on 2 elements:
$('#container').find('*').stop(true, true);
The animation can be stopped by an end user hovering over a button, in which case the animation stops after completion (which is what I want). However, the button hover also initiates another function (removes and reloads the elements), and there's a conflict if that function runs before the animations are complete.
I was thinking that using 'after' or 'complete' with the above code might work, but I can't figure out what the syntax would be.

im not sure what you are trying to achieve, but in order to check whether or not there are running/pending animations on the object using jQuery, you can use .promise().done()
example, somehing of this sort:
var animations_running;
$('#container').promise().done(function() {
animations_running=false;
});
$('#container').on("mouseover",".SomethingInside",function(){
if(animations_running==false){
//...do animations...
animations_running=true;
}
});
you can also add a callback function to your jQuery animations as follows:
$('#container').on("mouseover",".SomethingInside",function(){
if(animations_running==false){
$(this).animate({
left:+=50
},500,function(){
//...this is the callback function...
});
animations_running=true;
}
});

Callback function to be executed after jQuery show / hide?

In iOS, the following code has a noticeable flicker between the hide() and the scrollBy():
element.hide();
window.scrollBy(0, -elementHeight);
This is because toggling between display: none and display: block on iOS is a heavy task, as if the elements are being added to and removed from the DOM.
I need a way to perform window.scrollBy() as a callback, once the hide() has successfully completed and the DOM has updated. Is there a way to do this in jQuery?

Either pass a duration and a callback, or just pass a callback option, like this:
element.hide(0, some_function);
// or
element.hide({done: some_function});
By default, the second option takes 400 ms. To do it immediately, use one of these:
element.hide(0, some_function);
// or
element.hide({duration: 0, done: some_function});
Here's a jsFiddle demo.
See the jQuery documentation for more details.

From the jQuery api:
.hide(options)
complete
Type: Function()
A function to call once the animation is complete.
Try this:
element.hide({complete: function(){
window.scrollBy(0, -elementHeight); });

run animation only if not already running jQuery UI

I am using jQuery UI's Bounce Effect on a click event like this
$("#myelm").click(function(){
$(".wlbutton").children("span.new").effect( "bounce", "slow");
});
I would want to run the effect only if it's not already running. So if you click twice fast it will only act on the first click. How can I achieve this?
I've tried to clear the queue with jQuery's .stop() without any luck.

You can use .not to filter it:
$('#myelm').click(function(){
$('.wlbutton').children('span.new').not(':animated').effect('bounce', 'slow');
});
However I would use .is function to check instead of a filter because of code readability

Use the :animated selector to check whether the particular element is animating or not. If it is currently getting animated, Just let that click event ignored.
Try,
$("#myelm").click(function(){
var xEle = $(".wlbutton").children("span.new");
if(xEle.is(':animated')) { return; }
xEle.effect( "bounce", "slow");
});
The another way would be using .stop().
$("#myelm").click(function(){
$(".wlbutton").children("span.new").stop().effect( "bounce", "slow");
});
DEMO

Javascript on scroll event change css then wait and then rechange

I am trying to change the css on scroll event and it is working.
$(window).scroll(function () {
$(".navcont").css("background-color", "pink")
});
But, when I try to give delay and change it back,
$(window).scroll(function () {
$(".navcont").css("background-color", "pink")
.delay( 5000 )
.css("background-color", "white");
});
It always shows pink color, But I want the white color first then delay and then pink color.
Can some one help me with this!
thanks in advance

Try using only setTimeout, without animate:
$(window).scroll(function () {
$(".navcont").css("background-color", "pink");
setTimeout(function() {$(".navcont").css("background-color", "white")}, 8000);
});
Here on jsFiddle.

First thing I think of is using .animate() to get the callback, then using setTimeout to delay the return to CSS:
$(window).scroll(function(){
$('.navcont').animate({backgroundColor:'pink'},1,function(){
var $this = $(this);
setTimeout(function(){
$this.css({backgroundColor:'white'});
},80000);
});
});
The 1 means the animation is 1 millisecond long, which is invisible to the eye but I've had issue with using zero so I just add a value to satisfy the callback.

The delay() function works only on a jQuery effects queue, not on all functions. The effects are such as fadeIn, slideUp, etc. There is a custom effect generator called animate() and you can use that with delay(). However, you cannot animate non-numeric properties like background-color. So here is a trick -
$(window).scroll(function () {
$(".navcont")
.animate({dummyProperty: "dummyValue"},1,"linear",function(){
$(this).css("background-color","pink")
})
.delay( 80000 )
.animate({dummyProperty: "dummyValue"},1,"linear",function(){
$(this).css("background-color","blue")
});
});
The first argument for animate is a css property you wish to animate. Since background-color cannot be animated, we use a dummy property here (you can use anything here, doesn't make any difference).
The second argument is the time of animation. We just use 1 millisecond here because we set the real delay using the delay() function.
The third argument is the easing (doesn't matter in this case).
The fourth argument is a callback function with 'this' pointing to the selected HTML element. So we change it's background-color here.

Problems with removing elements in jQuery

I am attempting to remove an object from a page with jQuery. I also want to animate the removal. The goal is to make the element fadeOut(), wait a second, then remove(). But it seems to refuse to wait to remove the element, even when I use it in a setTimeout() function. How can I make an element fadeOut(), and then remove() it?
$("button").click(function() {
$(this).fadeOut();
setTimeout(function() { $(this).remove();}, 1000);
});

Read manual carefully:
http://api.jquery.com/fadeOut/
The fadeOut() method has a callback that is invoked after the fadeOut completes. To use it:
$("button").click(function() {
$(this).fadeOut(function() { $(this).remove();});
});
There should be no reason to wait one second after the fadeOut completes, before removing the element, because the element will be invisible when it is removed.

In your timeout function, this isn't what you think it is - it's actually the global window object.
In any event (no pun intended) you should use a "completion callback":
$("button").click(function() {
$(this).fadeOut('slow', function() {
$(this).remove();
});
});
Never, ever, mix setTimeout and the animation queue. It's fine to interleave the two, i.e having a completion callback start a timer, or having a timer starting an animation, but it's never OK to assume that you can start both a 1000ms animation and a 1000ms timer and have them complete at the same time.
EDIT fixed code - no need for self in a completion callback, I was still thinking about setTimeout and this when I wrote that!

$('button').click(function(){
$(this).fadeOut(function(){$(this).remove()});
});​
DEMO

Why not just use the callback of fadeout?
$("button").click(function() {
$(this).fadeOut(function(){$(this).remove();});
});

try this one, maybe it helps:
$("button").click(function() {
(function(that) {
that.fadeOut();
setTimeout(function() {
that.remove();
}, 1000);
})($(this));
});