We Keep Coding

I want to execute one code after finish another code

I have write a jQuery CLICK event, in that event there are two codes which will be executed after click the event but I want to finish the first code execution first then after finish it start execution of the second code. But now they both are executing at the same time when the CLICK event is triggered.
The first code is about slideUp, so I want to complete the slideUp first then start the execution of second code. Here is the Fiddle
I have attached the code and image both here, please check and help me if you can.
$(".team-item-area").on('click', function(){
$(this).siblings().find('.team-item-right-para').slideUp();
$(this).find(".team-item-right-para").slideToggle(function(){
var check = $(this).is(":visible");
if(check == true)
{
$(this).parents('.team-item-area').siblings().find('img').hide();
$(this).parents('.team-item-area').find("img").fadeIn();
} else {
$(this).parents('.team-item-area').find("img").show();
$(this).parents('.team-item-area').siblings().find('img').fadeIn();
}
});
})[enter image description here][1]

According to the documentation the slideup function has a second argument that is the function that will be called once the animation is complete. The first argument is the duration of the slide. You can set as you want (400 is the default)
$(this).siblings().find('.team-item-right-para').slideUp(400, function {
... code to execute after the slide is complete...
});

Use slideToggle method inside this you can right anything after completing
http://api.jquery.com/slidetoggle/

Either use the solution #BenM mentioned or use somethin like this:
$(this).find(first operation)
.delay(1)
.queue(function (next) {
$(this).find(second operation);
next();
});

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;
}
});

How can you execute a javascript function after another one is completed?

I want that a javascript function executes after another one is completed. This is my code:
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
window.addLoadEvent = function() {
$('#popuprel1').show();
}

You want to use the callback for fadeOut. It calls the second function once the initial animation is complete.
See http://api.jquery.com/fadeOut/
Basically - you want to do something like this:
$(window).load(function(){
$('#dvLoading').fadeOut(2000, function() {
$('#popuprel1').show();
});
});

It's because the second onload replaces the first one. Follow this.
For multiple events on onload, use addLoadEvent

Is it possible to bind a handler to a jQuery effect?

I would like to call function when slideUp or slideDown are performed on an element. Is this possible?
Something like:
$('#panel').on('slideUp', function() { open--; });
$('#panel').on('slideDown', function() { open++; });
Update: The problem is that there are a ton of slide calls (e.g.: $().slideUp()) all over the page, within ajax responses, hash link clicks, etc.. I was hoping to bind to the slide itself somehow rather than add code to each calling function.

You cannot bind to an event since there is no such.
But you can pass a handler that will be called after animation is finished
$('#panel').slideUp(function() { ... });
http://api.jquery.com/slideUp/

If you really want to do this, you can use custom events and your own little plugin, something like this:
$.fn.mySlideToggle = function() {
this.slideToggle();
this.trigger('mySlideToggle');
}
$('div').on('mySlideToggle', function(){ console.log('hey') });
$('button').on('click', function(){ $('div').mySlideToggle(); });
Here's a little demo (check console): http://jsbin.com/asejif/2/edit
In your case it is redundant though, since you can use the callback that the slide events provide, but it might be useful for other things...

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));
});