CODEWITHSUNDEEP
jqueryshowslidetoggle
Alegro
Alegro

Reputation: 7956

How to force js code to execute in the written order?

$("#btnGall").click(function() {
    $('#gall').slideToggle('slow');
    $("#gInfo").show();
});

Why this code executes firstly the second line, and then the first one.
I don't want to show #gInfo before slideToggle is finished.

Upvotes: 0

Views: 135

Answers (3)

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

Call the function from an anonymous function specified as the success callback passed into the slidetoggle function.

$("#btnGall").click(function() {
    $('#gall').slideToggle('slow', function(){
        $("#gInfo").show();
    });
});

SlideToggle Documentation

Working Example: http://jsfiddle.net/2zn6G/

Upvotes: 2

Ravi Y
Ravi Y

Reputation: 4376

Slide toggle allows for a call back after the operation is completed

$("#btnGall").click(function() {
    $('#gall').slideToggle('slow', function () {    $("#gInfo").show();});

});

Upvotes: 2

adeneo
adeneo

Reputation: 318312

That's because animations are asynchronous, and the script does'nt wait for them to finish (thank God). There are built in callbacks for this specific use added to most jQuery functions that do animations :

$("#btnGall").click(function() {
    $('#gall').slideToggle('slow', function() {
        $("#gInfo").show();
    });
});

Upvotes: 2

Related Questions