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

jQuery animate running a lot of times

I'm having problems with my animate function. I want it to just run 1 time, but it doesn't. I've tried to debug it with using .stop(); but that didn't work either, so right now I have no idea how to solve this.
The JavaScript:
$(".box").hide();
$(".box").contents().not(".progress").hide();
$(".box").first().show(150, function showNext () {
var next = $(this).next(".box");
if (next.length > 0) {
next.show(150, showNext);
} else {
$(".box").contents().not(".progress").fadeIn(800, function () {
$(".progress").animate({
width: 'toggle'
}, 800);
});
}
});
The problem is easier to see at this jsfiddle:
http://jsfiddle.net/etBLj/
How do I solve this?
Thanks in advance!

The issue is that when you call $(".progress").animate(), the animation gets executed on every element with the "progress" class for the whole document. Since showNext() is called recursively, you end up with multiple animations for each matching element.
All you need to do is to restrict the call to animate to be applicable to the current element in your recursive loop. So change to $(this).next().animate and it will work.
Fiddle: http://jsfiddle.net/etBLj/1/
Additionally I think the JavaScript would become easier to understand if you separated the "showing of the headers" from the "animating of the progress bars", and replaced the recursive function with a simple each loop. For example: http://jsfiddle.net/etBLj/2/

Wait for animation to complete before continuing in jQuery

Is there anyway to wait for a jQuery animation to finish before proceeding with another command?
For example, I want to fade out/slide up an element, change some items within the element and then fade them back in/slide back down.
If I put the statements one after another, you can see the items change before the animation completes.
$('#item').fadeOut();
$('#item').html('Changed item');
$('#item').fadeIn();
Thanks.

You can pass callback in fadeIn/fadeOut. jQuery docs
$('#item').fadeOut('slow', function(){
$('#item').html('Changed item');
$('#item').fadeIn();
});

You can either use the callback method which gets called from .fadeOut, like
$('#item').fadeOut('fast', function() {
$(this).html('Changed item').fadeIn();
});
or use the underlaying Deferred object
$('#item').fadeOut('slow').promise().done(function() {
$(this).html('Changed item').fadeIn();
});

Pass a callback function to fadeOut.
$("#item").fadeOut(function() {
$(this).html("changed").fadeIn();
});
This is the sort of thing you'll learn in a basic jQuery tutorial.

$('#item').fadeOut('slow', function() { // do your stuff here });
For more info: http://docs.jquery.com/Effects/fadeOut#speedcallback

Checking for visibility of a toggled element

I have a button which toggles the visibility of a <div> below it and want to modify the text on the button depending on the visibility of said <div>.
Here is a live demo on jsFiddle
If you click on "Saved Data", the first time it works correctly, but the next time you click the text does not change. This in itself is behaviour that I don't understand.
Now, I could use multiple handlers for slideToggle(), however, elsewhere in the code I also set intervals which load data next to "Cookie data:" and "Server data:". I don't want these intervals to do anything if the <div> is not visible so I use something like this:
this.timer_cookiedata = setInterval(function(){
if (!$savedData.is(':visible'))
{
return null;
}
// ..
});
I'm worried these intervals are not going to work properly because of this is(':visible') business. So the question is, why does this happen (else statement is ignored), and what can I do to mitigate this?

Check out the updated fiddle. When you check for visibility right after you call slideToggle, jQuery may not have updated the visibility of the element yet since the animation takes some time to finish. For this exact reason, slideToggle has a callback you can use to perform operations after the animation has finished:
$(function () {
var $savedData = $('#savedData');
$('#btn-savedData')
.click(function () {
var $button = jQuery(this);
//I'm checking the visibility in the callback. Inside the callback,
//I can be sure that the animation has completed and the visibility
//has been updated.
$savedData.slideToggle('fast', function () {
if ($savedData.is(':visible')) {
$button.html('visible');
} else {
$button.html('not visible');
}
});
});
});​

jQuery FadeOut function

I'm trying to add a fadeOut function which links to another. CLICK HERE At present I have a flashing logo. When the user clicks on the logo, the flashing stops, has a slight delay then slowly fades Out. Is there anyone out there that is able to correct me on the code I have pasted below?
<script>
$(document).ready(function(){
$("#center-gif").click(function(){
$('#center-gif').hide();
$('#center-img').show();
});
$('#center-img').click(function(){
$('#center-img').hide();
$('#center-img-gif').show();
});
$('flash-link').click(function(){
$('center-img').fadeOut(5000);
});
});
</script>

If you want to access element with class/id; you must always define . and # these at the begining, like css.
Some Examples:
$('img').fadeOut();//selects all img elements
$('.img').fadeOut();//selects all elements with class="img"
$('myClass').fadeOut(); //false
$('.myClass').fadeOut(); //true
$('myId').fadeOut(); //false
$('#myId').fadeOut(); //true
Here is working jQuery for your question with less code:
$(document).ready(function(){
$("img").click(function(){
var takeId = $(this).attr('id');//takes clicked element's id
$('img').hide();//hides all content
$('#'+takeId).show();
//matches clicked element's id with element and shows that
});
$('#flash-link').click(function(){//define '#' id declaration here
$('#center-img').fadeOut(5000,//new function after fadeOut complete
function() {
window.open('url','http://iamnatesmithen.com/jukebox/dancers.php');
return false;
});
);
});
});

So I assume your problem is that that image does not fade out, right?
This could solve it:
First of all change your .click()-functions to that:
$().click( function(event) {
// cour code
event.preventDefault();
}
And than change the last one like that:
$('#flash-link').click( function(event) {
$('#center-img').fadeOut( 5000, function() {
window.location.href = 'jukebox/dancers.php';
});
event.preventDefault();
});
I didn't test that, but it should work. What it does is: It fades out the image and calls a function when ready. This functions then redirects to your next page.
The event.preventDefault(); will tell the browser not to delegate the click-event. If you don't put it there, the browser opens the anchor without waiting for any JavaScript to execute.
Note
When you want to select an element with an ID use this selector: $('#[id]')as this selector $('html')works only with HTML-elements.