Why do jQuery's show() and hide() methods trigger a fade?

html, javascript, jquery

Solution

The method signature you are using (`.hide( duration [, callback] )`) is for animated hiding. The signature for immediate hiding is simply `$("div.tweet").hide();` To hide the element instantly, you can pass an argument of `0` for the duration right before your callback argument.

Better yet, simply invoke the function right after you call `$("div.tweet").hide();`. You don't really need a callback; the hide action is synchronous.

$("div.tweet").hide();
(function() {
    $("div.tweet-author > p.name").html("Show Recent Tweets");
    $("div.tweet-author > p.position").html("By the iNovia Team");
    $("aside").addClass("click-to-show-tweets");
  })();

Problem

I'm attempting to show and hide tweets on a client's side right now, but jQuery is collapsing the element on `hide()` and fading it in on `show()`. Relevent HTML: ``` <aside> <div class="tweet-author"> <p class="name">Graham Swan</p> <p class="position">Managing Partner</p> </div> <div class="tweet"> <blockquote>Just had the greatest cup of coffee ever!</blockquote> <div class="clearfix"> <time>2 minutes ago <span>via</span> Twitter</time> <a href="#">Hide Tweets</a> </div> </div> </aside> ``` Relevant JavaScript: ``` // Hide tweets when "Hide Tweets" link is clicked $(document).on('click', 'div.tweet > div.clearfix > a', function(e) { e.preventDefault(); $("div.tweet").hide(function() { $("div.tweet-author > p.name").html("Show Recent Tweets"); $("div.tweet-author > p.position").html("By the iNovia Team"); $("aside").addClass("click-to-show-tweets"); }); }); // Show tweets when "Show Recent Tweets" link is clicked $(document).on('click', 'aside.click-to-show-tweets', function(e) { e.preventDefault(); $("div.tweet").show(function() { $("div.tweet-author > p.name").html("Graham Swan"); $("div.tweet-author > p.position").html("Managing Partner"); $("aside").removeClass("click-to-show-tweets"); }); }); ``` jQuery is performing the following actions: - Collapsing the `div.tweet` element instead of immediately hiding it when `hide()` is called. - Fading in (in webkit browsers) or expanding (in moz browsers) the `div.tweet` element instead of immediately showing it when `show()` is called. I've tried both v1.7.2 and v.1.8.2 of jQuery, as well as different browsers, but all yield the same effect. Does anyone know why this is happening? You can see a live example at http://grahamswan.com/clients/inovia if that helps.

Original source