We Keep Coding

.rotate() callback function not working if i remove animateTo parameter

Refer this fiddle where the callback function is getting called
$("#img").rotate({bind:{
click: function(){
$(this).rotate({
angle: 0,
animateTo:10,
duration:200,
callback: function(){
$(this).rotate({
angle: 340,
animateTo:100,
duration:400,
callback: function(){
alert("success")
}
})
}
})
}
}
});
Now in the above code i am just removing the animateTo parameter and the call back is not working !!
check this fiddle
Why is this happening?! is the number of parameters play a role in callback function !?

I think the answer is Parameters
if youcheck this
Check here
then you can see that onclick nothing happening to logo
I have removed animate parameter also onclick event

Ok, I done some more testing, and oufcourse you need all parameters in this case. Can't you just set the animateTo so it does nothing?

Wait for animation function in javascript

I have the following methods in javascript:
Controller.prototype.changeScene = function (curScene, newScene) {
sf.scene.hide(curScene);
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
};
And in another JS Class:
Test.prototype.handleHide = function () {
alert("SceneDialog.handleHide()");
$(".screenOverlay").fadeOut("slow");
$(".dialogBox").fadeOut("slow");
};
sf.scene.hide() calls the handleHide method. In handleHide there's some animation, but it's not shown. The Controller doesn't wait for it to be finished.
I tried $.when(sf.scene.hide()).done() without any luck.
Any suggestions?

You can use the jQuery queue to keep a list of animations that are queued to occur only after the previous one has completed.
sf.scene.hide(curScene);
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
would become:
sf.scene.hide(curScene);
sf.scene.queue(function() {
$(this).show(newScene, curScene);
$(this).dequeue();
});
sf.scene.queue(function() {
sf.scene.focus(newScene);
$(this).dequeue();
});

You can use the promise() function of jquery to call a callback when ALL animations are over.
Try out:
Test.prototype.handleHide = function (callback) {
$(".screenOverlay,.dialogBox").each(
function(i) {
$( this ).fadeOut("slow");
}
);
$(".screenOverlay,.dialogBox").promise().done(callback);
};
And pass the callback as an argument to handleHide. Your changeScene function should look like this:
Controller.prototype.changeScene = function (curScene, newScene) {
sf.scene.hide(curScene, function() {
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
});
};

if you are using jquery animation functions, jquery generally provides a complete parameter which will be called when the function is complete.
using fadeout:
$('#test').fadeOut('slow', function() {
// fadeout is finished!! do something
});

Jquery css(width, 0) not working if the element is hidden

I have created a quick jsfiddle here showing it not working.
The problem I have is with the slide up. I want it to work so that it only sets the width to 0 after the slideup has finished. The obvious callback function does not seem to be getting called after the slideup has finished.
I would like it to work like this:
Shows the red box by sliding down and increasing the width together.
Click again and the box slides up then sets the width the 0. So that if the user clicks the button again the first animation would appear the same.
var $foo = $("#elm");
$("#btn").toggle(function() {
showDropDown();
}, function() {
hideDropDown();
});
function showDropDown(){
$foo.slideDown({duration:500, queue:false}).animate({"width": 400}, 250);
}
function hideDropDown(){
$foo.slideUp({duration:800, queue:false},function(){
$foo.css({"width": 0});
});
}
UPDATE:
The strange thing is that if I add a alert() into the callback function for slidedown it never gets called.

Edit: Sorry for the first answer, didn't pay attention.
The problem is that the callback is not executed, because you don't give the parameters according to the API, and the callback is not "wired" in.
Instead, you can use the promise().done(...) combination to achieve the objective you wanted.
So, you should modify your hideDropDown method as follows:
function hideDropDown(){
$foo.slideUp({duration:800, queue:false}).promise().done(function(){
$foo.css("width", "0px");
});
}
From the jQuery docs:
"The .promise() method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended."

Maybe you just need to use animate to reset width to 0 like this:
var $foo = $("#elm");
$("#btn").toggle(function() {
showDropDown();
}, function() {
hideDropDown();
});
function showDropDown(){
$foo.slideDown({duration:500, queue:false}).animate({"width": 400}, 250);
}
function hideDropDown(){
$foo.slideUp({duration:800, queue:false}).animate({"width": 0}, 1);
}
or set width to 0 like this:
function hideDropDown(){
$foo.slideUp({duration:800, queue:false}).width(0);
}

Why not chain .animate() after .slideUp()?
$foo.slideUp({duration: 800, queue: false}).animate({"width": 0}, 800);

Jquery delay not working

Can someone please tell me why my function is not executing, after my images are displayed?
$("#screen").css("background-image", "url('screens/animated/077.gif')").delay(5000).queue(function() {
$("#screen").css("background-image", "url('screens/animated/078.gif')").delay(5000).queue(function() {
buttonClick(16);
});
});
Don't know why it won't call my buttonClick(16); function.

You could just animate instead dude? animate() you can pass a time to and also it has a callback function, so once the first animation is complete you can run more code, i.e.
$(this).animate(function(){
//Do animation
},1000,function(){
//Animation is complete, do something else like the next animation
$(this).animate(function(){
//Another animation to run once the first is complete
});
});

Because you didn't dequeue.
$("#screen").css("background-image", "url('screens/animated/077.gif')").delay(5000).queue(function () {
$(this).css("background-image", "url('screens/animated/078.gif')").delay(5000).queue(function () {
$(this).dequeue();
buttonClick(16);
}).dequeue();
});

The queue function receives a param that you should call when the next function should run.
Example:
$().queue(function (next) {
// Do what you need
next();
});

jQuery Delaying Queue

I want to delay things like the css from happening but this method wont work. Any ideas on how I can delay tasks.
$(function() {
$('.btn').click(function() {
$('.divOne').animate({"left": "+=400px"}, "fast").delay(800).css("background-color","yellow");
});
});

You can use .queue() to stick it on the default animation (fx) queue, like this:
$('.btn').click(function() {
$('.divOne').animate({"left":"+=400px"}, "fast").delay(800).queue(function(n) {
$(this).css("background-color","yellow");
n(); //call next function in the queue, needed if you animate later!
});
});
You can test it here, all this does is stick it in the fx queue using .queue(function(n)), the n is the next function in the queue, so we're calling it, for example if you didn't do this and added any animation after it, it just wouldn't run, because the next function or .dequeue() isn't called.

Maybe use a callback function on the animate. Once the animation is complete use a setTimeout()
$(function() {
$('.btn').click(function() {
$('.divOne').animate({"left": "+=400px"},"fast", function() {
var $elem = $(this);
setTimeout(function() {
$elem.css('background-color','yellow');
}, 800);
})
});
This might not be syntactically perfect.