CODEWITHSUNDEEP
javascriptjquery
Alexander Solonik
Alexander Solonik

Reputation: 10230

toggle() function working without passing the 2nd parameter .

Hey guys i am just building the simplest of drop down menus and i am using a very small snippet of Jquery , i coded it myself . There is a small problem i am having though. checkout my Jquery code : 

$('#r-menu').on('click', function () {
    $('#menu').toggle(function () {
        $(this).css({
            'display': 'block'
        });
    }, function () {
        // $(this).css({ 'display' : 'none' }); 
    }); // end toggle
});

Fiddle here.

now , why is the toggle() working without me adding the secound function . my code works just fine , my question is why is the menu toggling between display:none and display:block , when i have not explicitly specified the 2nd parameter of toggle() ? This would be my 1st and most important question .

My 2nd question and more of a supplementary one , notice how when you click on a menu, when toggling , the menu slides in from the top left and enlarges , where is this effect coming from ? i have not specified slideup() or slidein() anywhere ? is there some effect internally being applied ?

I would appreciate an explanation on this difficulty of mine.

Thank you.

Alexander.

Upvotes: 0

Views: 79

Answers (2)

SeriousDron
SeriousDron

Reputation: 1346

Toggle is toggles an elemet between hidden and shown states by default.

And in jQuery API docs there is no variant with callbacks expected now. But you can still add callback on the animation ends like:

$('#menu').toggle(0, function() {
    // Animation complete.
});

For second part. By default animation duration is 400 milliseconds(0.4 seconds). By passing options you can change it's duration (0, no animation in my example, just hide) and kind animation using by jquery

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388326

The toggle(function, function) is removed in jQuery 1.9, it was used to call different function on each click of an elemnet.

You are calling the the toggle() function, which toggles the display of the element

$('#r-menu').on('click', function () {
    $('#menu').toggle(); // end toggle
});

Demo: Fiddle

Upvotes: 3

Related Questions