CODEWITHSUNDEEP
jquery
tanktery
tanktery

Reputation: 155

I would like to know what the difference is between these two functions?

Function 1

// Toggle the sharing section
    // Start with hiding the icon list
    $("#shareThisPost").click(function(){
        $("#shareThisPost").fadeOut("slow");

        $(function() {
            $("div#shareSection ul").fadeIn("slow");
            $shareState = 1;
        });
    });

Function 2

// Toggle the sharing section
        // Start with hiding the icon list
        $("#shareThisPost").click(function(){
            $("#shareThisPost").fadeOut("slow", function() {
                $("div#shareSection ul").fadeIn("slow");
                $shareState = 1;
            });
        });

Upvotes: 2

Views: 63

Answers (2)

austinbv
austinbv

Reputation: 9491

The second will fire after the fade out finishes.

THe first is just that two separate functions first a click event fires then the fade out starts and then the fade in starts. The second a click event fires. Then a fade out fires AFTER the fade out finishes the fade in starts.

The "," as you say is a paramater to the fadeOut function. Think about it this way, if you have a function definition 

function x(param1, param2) {
    //Do something
}

Well the fade out is structured just like that. 

function fadeOut(param1, param2) {
     // This time param2 is a call back function and param one is the speed fade.
}

In js a function can be passed just like a variable, so param2 is passed as an argument to the fade out function and is called inside the fadeOut after the fadeOut action finishes.

In the other case fadeOut starts then the next action is called. So if you really want to see what is happening try running these two functions with a fade out time (param1) of 1000 That will really give you time to see what the difference is between the two.

So to answer your question in sort the difference between the one with the "," and the one without is that in one the function is passed as a paramater to the fade out and in the other the function is run as it's own entity.

Upvotes: 4

kobe
kobe

Reputation: 15835

$("#shareThisPost").click(function(){
            $("#shareThisPost").fadeOut("slow", function() {
                $("div#shareSection ul").fadeIn("slow");
                $shareState = 1;
            });
        });

The following code executes after the fadeOut happens , this is called call back , 

$("div#shareSection ul").fadeIn("slow");
                $shareState = 1;
            });

This is equivelent to document.ready , i don't understand why it is inside a click function

$(function() {
            $("div#shareSection ul").fadeIn("slow");
            $shareState = 1;
        });

Upvotes: 2

Related Questions