Develop Reference

pause executing function on purpose

I have a simple .click() function with some functions in it:
$mario.on('click', this, function() {
var width_mario = $window.width()/2;
$contentw.animate({left: '100%', marginLeft: -width_mario, marginTop: 0}, 600);
$fixed.css({'background-color': '#510000', 'left': '25%'});
createMario();
trigger(); // fire trigger not until createMario() is finished with animation
});
inside the function of createMario() are loads of jQuery .animate()ions. What I intend to do is, to fire trigger not until the animations of createMario()are finished. Something like the return function you can do if an animation is finished BUT inside the click function.
Thanks
edit: and not with setTimeout() because the animations have a random speed.

You can't literally do that. What you need to do instead is pass a reference to the trigger function into createMario and have it call that function when the animations are finished. Assuming the animations are via jQuery, they have a callback they call when they're done.

pass it as a callback, something like this:
function createMario(calback_fn) {
...
animate({...}, {duration: 12345, complete: callback_fn});
...
}
Make sure you add it to the longest animate call.
Note that may need to slightly change the animate syntax, see http://api.jquery.com/animate/ for different argument options).
Then do:
...
$fixed.css({'background-color': ... as before... });
createMario(trigger);

You can also use element.promise.done(function() { trigger(); }); if you're animating 1 element in the createMario function, or you can attach it to the longest animated element also (the one that takes the longest to finish), and it will call the trigger() function after that element has finished animating.
Here's a jsFiddle I put together that exemplifies this: http://jsfiddle.net/WPHmY/2/

.text() immediately being processed

I do not know what title to give so please I do apologize, i'm just getting curious why in the code below, the text is getting changed before it even fades out even if i've put it after a fade.
$('form').submit(function(){
return false;
});
$('button').on('click',function(){
$(this).addClass('busy');
$(this).parent().find('button').attr('disabled',true);
$(this).parent().find("button:not('.busy')").fadeOut(500);
$('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});
$('p').on('sfsfsf',function(e,data){
//this line below
$(this).delay(1000).fadeOut(500).text('Complete!');
$(this).fadeIn(500,function(){
$(this).delay(500).fadeOut(500);
});
});
http://jsfiddle.net/v4nwQ/
Why is that so, and how do i Fix it?

Because fadeOut() returns immediately before the animation has complete; text() then gets processed straight away. You should instead change the text in the fadeOut() callback;
$(this).delay(1000).fadeOut(500, function () {
$(this).text('Complete!');
});
Unrelated, but something to note; you should look at caching the result of $(this); you're calling it a lot.
$('p').on('sfsfsf',function(e,data){
var self = $(this);
self.delay(1000).fadeOut(500, function () {
self.text('Complete!');
});
self.fadeIn(500,function(){
self.delay(500).fadeOut(500);
});
});

Yes, that is correct. All functions in a chain execute immediately. If you want something to execute after an animation, you use the callback parameter that all animations include.
And delay only delays animations! It has no effect on things that are not animations. So:
$(this).fadeOut(500, function() { $(this).text('Complete!'); });

Try:
$(this).parent().find("button:not('.busy')").fadeOut(500, function() {
$('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});

you need to change the text in the call back funciton of the fade like you're doing it in the last few lines:
$(this).fadeIn(500,function(){
$(this).delay(500).fadeOut(500);
});
otherwise the text change is executed immediately

jquery do something at the begin and end of animation

I have the following JQuery code
$("#classparent").click(function () {
$(".classsubitems").slideToggle('slow', function () {
});
});
I need to let JQuery run some code at begin and end of animation.
Is this possible?
Thank you

Simple enough.
$("#classparent").click(function () {
// before start of animation code here
$(".classsubitems").slideToggle('slow', function () {
// end of animation code here in the callback
});
});

The code you want to execute before the animation you can place before the slideToggle method. The code you want to execute after the animation you can place in the callback function.

SlideToggle has a callback-function (it looks like you already have provided that?)
http://api.jquery.com/slideToggle/
For the code to be executed before the animation: the easies way to do this is simply calling it before the line with $(".classsubitems").

SlideToggle doesn't have callback method to call at the beggining but it is possible when completes.
$("#classparent").click(function () {
//Code to call before animation starts
$(".classsubitems").slideToggle('slow', function () {
//code to execute after the animation finish.
}); });

How do I listen to whenever a div changes position with jQuery?

I'd like to do something like this:
$('#myDiv').positionChanged(function() {
alert('Yay!');
});
Any ideas? Is this already built into jQuery in someway?

I ended up using this:
function whereIChangePosition() {
// Code to change position
// ...
$('#myDiv').trigger('positionChanged');
}
And my listener:
$('#myDiv').bind('positionChanged', function() {
// Do stuff
});

unfortunately there is nothing of the kind in jquery. but that will be a good idea for maybe the next release.
So far what you can do is to add a call back yourself:
lets say you have a function that changes the position of a div.
function changePosition(elId,position) {
$(elId).css('top',position);
// or more complexe code
}
you can add a call back function to it.
function changePosition(elId,position,callback) {
$(elId).css('top',position);
callback();
}
The other method is to use DOMAttrModified event, but it has very low browser support as of this date

jQuery slideUp().remove() doesn't seem to show the slideUp animation before remove occurs

I have this line of JavaScript and the behavior I am seeing is that the selectedLi instantly disappears without "sliding up". This is not the behavior that I expected.
What should I be doing so that the selectedLi slides up before it is removed?
selectedLi.slideUp("normal").remove();

Might be able to fix it by putting the call to remove in a callback arg to slideUp?
e.g
selectedLi.slideUp("normal", function() { $(this).remove(); } );

You need to be more explicit: rather than saying "this" (which I agree should work), you should do this:
$("#yourdiv").slideUp(1000, function() {
$(this).remove();
});

The simplest way is calling the "remove()" function inside slideUp as a parameter like others have said, as this example:
$("#yourdiv").slideUp("normal", function() {
$(this).remove();
});
It is a must to call it inside the anonymous function() to prevent remove() to be executed before the slideUp has ended. Another equal way is to use the jQuery function "promise()". Better for those who like self-explanatory code, like me ;)
$("#yourdiv").slideUp("normal").promise().done(function() {
$(this).remove();
});

Using promises you can also wait for multiple animations to get finished, e.g.:
selectedLi.slideUp({duration: 5000, queue: false})
.fadeOut({duration: 3000, queue: false})
.promise().done(function() {
selectedLi.remove()
})

selectedLi.slideUp(200, this.remove);