slideToggle() on <tr> causes “jump”

问题:

When using jQuery slideToggle() function to show/hide data on a new row in a table it causes it to stutter. Yet, when using slideToggle() to show/hide a <div> it works very smoothly.

Can anyone tell me why this happens?

Fiddle example: http://jsfiddle.net/gLGUG/

jQuery code:

$("tr").click(function () {     $(".slideMe").slideToggle(); });  $(".slideMeDiv, button").click(function () {     $(".slideMeDiv").slideToggle(); }); 

HTML Markup:

<table>     <tr>         <td>One Row</td>     </tr>     <tr>         <td>Click me</td>     </tr>     <tr class="slideMe">         <td>SlideDOWN</td>     </tr> </table> <br /> <button>Slide Div</button>  <div class="slideMeDiv">     Slide me as well </div> 

回答1:

Mention the border="0" cellspacing="0" cellpadding="0" in the table

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 

this will solve the jumping issue

Here is the jsFiddle File

---

Also for sliding effect you need to wrap your text with a div and place the div in-side the td

here is the updated jsFiddle File

回答2:

I just do this in my js

$(document).ready(function(){     $('tr').click(function(){         $('.slideMe').slideToggle();         $('.slideMe').css("display", "block")     }); }); 

This stops the tr tag displaying as table-row which doesn't work with a slide toggle

回答3:

The slide toggle seems to work fine on a table row without any data inside its td's so if you slideToggle the content inside the td's then it should work.

try this:

function slideToggleRow(selector){     $(selector).find("td").contents().slideToggle();     $(selector).slideToggle(); } 

used like this:

$("tr").click(function () {     slideToggleRow(".slideMe"); }); 

This should work, maybe not perfectly, but it's the best solution I have so far. If anyone finds a better solution please let me know.

回答4:

For the restructured table:

   <table>      <tr>          <td>One Row</td>      </tr>      <tr>          <td>Click me</td>      </tr>      <tr class="slideMe">          <td>              <div class="tdDiv">SlideDOWN</div>          </td>      </tr>    </table> 

(1) Make sure you show both the "slideMe" tr and the "div" inside of the "slideMe" tr's td like this:

$('.slideMe').show(); $('.slideMe').find('.tdDiv').show(); 

(2) Use this code to toggle your slideMe row

 function toggleRow(selector){    if($(selector).css('display') == "none"){       $(selector).find('.tdDiv').slideDown(200);       $(selector).slideDown(200);    }    else{       $(selector).slideUp(200);       $(selector).find('.tdDiv').slideUp(200);    } } 

***Make sure the div inside the tr's td slides down BEFORE your tr slides down.

***Also, make sure the tr slides up BEFORE the div inside the tr's td slides up.

(3) Finally, you can call the toggleRow function:

 toggleRow($('.slideMe')); 

文章来源: slideToggle() on causes “jump”