hide() vs hide("slow")

Question

I need to hide a div and, with this code it works fine:

    var idObj = $(this).attr('key');
var valH = $(this).attr('hideval');
var valS = $(this).attr('showval');

if ($('div[name='+idObj+']').attr('isdisplay') == 'no') {
    $('div[name='+idObj+']').children().show("slow");
    $('div[name='+idObj+']').attr('isdisplay','yes');
    var divTitle = $('div[name='+idObj+']').children().first();
    var divArrow = $(this).children().first();
    //.attr('src',prefixImg+valH);

    //divTitle.show();
    //divArrow.show();
    $(this).children().first().attr('src',prefixImg+valH);
} else {

    var divTitle = $('div[name='+idObj+']').children().first();
    var divArrow = $('div[name='+idObj+']').children().last();
    //.attr('src',prefixImg+valS);

    $('div[name='+idObj+']').children().hide();
    $('div[name='+idObj+']').attr('isdisplay','no');

    divTitle.show();
    divArrow.show();
    $(this).children().first().attr('src',prefixImg+valS);
}

My div is hidden and the Title and arrows to reopen the div are shown. But if I try to use hide("slow") the divTitle and divArrow don't appear when my div is closed. Same problem using hide(1000).

Is there a difference between hide with and without "slow" parameter?

thanks, Andrea

Answer 1

From the official site

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

When a duration is provided, .hide() becomes an animation method. The .hide() method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.

So, if hide is used without delay, it hides immediately without animating - eg, poof.

If it's used with time, it becomes animated, so it disapears over time.

For your problems, it is difficult to judge without the corresponding html code.

Answer 2

$(element).hide() hides an element instantly, where $(element).hide('slow') will animate its disappearance (slowly).

It looks like (though I'm not sure) you want to do stuff after the animation is finished. In that case, do something like this:

var that = this;  // here to preserve scope for the block below
$('div[name='+idObj+']').children().hide('slow', function() {

    // This stuff happens after the hide animation is done.
    $('div[name='+idObj+']').attr('isdisplay','no');

    divTitle.show();
    divArrow.show();
    $(that).children().first().attr('src',prefixImg+valS);  // <= note "that" instead of "this"

});