Animating show() and hide() of TBODY - jQuery (English)

The old Google Groups will be going away soon, but your browser is incompatible with the new version.

Message from discussion Animating show() and hide() of TBODY

MIME-Version: 1.0
Date: Thu, 3 Sep 2009 00:32:16 -0700 (PDT)
In-Reply-To: <59f2a11f-2c20-403a-a639-ad99a10242fa@w10g2000yqf.googlegroups.com>
References: <59f2a11f-2c20-403a-a639-ad99a10242fa@w10g2000yqf.googlegroups.com>
User-Agent: G2/1.0
Message-ID: <48d3d8e1-4fa6-4965-8066-56112b11786d@c37g2000yqi.googlegroups.com>
Subject: Re: Animating show() and hide() of TBODY
From: candlerb <b.cand...@pobox.com>
To: "jQuery (English)" <jquery-en@googlegroups.com>
Content-Type: text/plain; charset=ISO-8859-1

Here's a page which demonstrates the problem; hiding and showing
tbody#middle makes it jump to the end of the page as it gets display:
block. It works if you set anim_speed to 0 (but then it's not
animated, of course)

<html>
<head>
<title>Test animate of tbody</title>
<script src="jquery-1.3.2.js"/>
<script type="text/javascript">
jQuery( function($) {
  var anim_speed = 250;
  var target = $('#middle');
  $('#hm').click( function() {
    target.slideUp(anim_speed);
    return false;
  });
  $('#sm').click( function() {
    target.slideDown(anim_speed);
    return false;
  });

});
</script>
</head>
<body>
<ul>
  <li><a href="#" id="hm">Hide middle</a></li>
  <li><a href="#" id="sm">Show middle</a></li>
</ul>
<table>
<tbody><tr><td>First row</td></tr></tbody>
<tbody id="middle"><tr><td>Middle row</td></tr></tbody>
<tbody><tr><td>Last row</td></tr></tbody>
</table>
</body>
</html>

Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy

Account Options