jquery - slideToggle not smooth

Question

I have a problem with the slideToggle function in jQuery. It is not smooth at all. Whenever I click the "See More" button, the content that should slideToggle, just pops out with no effect what-so-ever.

This is the HTML code:

<td class="third">
   <a href="javascript:void(0)" class="btn btn-primary upgrade1">See More</a>
</td>                           

<tr class="see_more" id="see_more">
      <td colspan="3" class="see_more_content">Hello! How are you doing</td>
</tr>

This is the CSS:

.third{
    text-align:right;
    padding-right:10px;
}
.see_more{
    display:none;

}
.see_more_content{
    text-align:center;
}

And finally, the javascript:

 <script type="text/javascript">
             $(document).ready(function(){ 
                 $(".upgrade1").click(function() {
                     $("#see_more").slideToggle("slow");
                  });  
               });
     </script>

I have read article "Animation Jump - quick tip", but I don't think that is the problem here. Since I haven't specified any margin or padding to the content that should slideToggle.

Thanks in advance for your help.

Answer 1

Table Rows don't seem to slide. You should try to find a workaround by using DIV instead. They slide and animate much better. You could also wrap the content into a div, and slide that? Maybe that would push the table row to imitate a slide.

Answer 2

You are running a slideToggle on a table row. Table rows do not play nice with some css. This means in some cases, it will not slide, but just show up when it is finally visible.