[jQuery] Re: How can I show/hide table row as it is a div?

[Rick Faircloth]

Try this code and see the difference in animation.
With the div's doing the "sliding", there's no "jerk"
as there is with table rows.

jQuery:

                $(document).ready(function() {
                        $("#hide1").click(function() {
                                $("#div1").slideToggle("slow");
                                return false;
                        });
                });


HTML:

<div id="div1">
<table>
<tr id="row1">
   <td>cell 1</td><td>cell 2</td>
</tr>
</table>
</div>

<div id="div2">
<table>
<tr>
   <td>cell 3</td><td>cell 4</td>
</tr>
</table>
</div>

<a href="#" id="hide1"> hide row 1 </a>


I know it looks weird, but I use it to slide
"table rows" ( where actually each row is a table of its own,
wrapped in a DIV ) and detail divs in a calendar.  I do get
some brief moments of "jerkiness" in IE, but it may have more
to do with interruptions to processor cycles than anything else.

Is this what you're trying to do?  I wasn't sure because you
were initially hiding table row one.  (Was that your intention?)

Rick




> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Bober
> Sent: Wednesday, January 16, 2008 4:23 AM
> To: jQuery (English)
> Subject: [jQuery] Re: How can I show/hide table row as it is a div?
> 
> 
> 
> 
> On 16 Sty, 00:23, "Rick Faircloth" <[EMAIL PROTECTED]> wrote:
> > Hi, Sebastian...
> >
> > Yes, it is possible.  I've worked trying to get smooth
> > animation out of sliding table rows, but they're always
> > "jerky".  I resorted to putting entire tables in div's
> > and animating the div's to get smooth performance.
> >
> > What does your entire jQuery and HTML code look like?
> >
> > Got a page I can see?
> >
> 
> I have tried it on localhost,
> but my code is quite simple
> 
> <table>
> <tr id="row1" style="display: none;">
>    <td>cell 1</td><td>cell 2</td>
> </tr>
> <tr>
>    <td>cell 3</td><td>cell 4</td>
> </tr>
> </table>
> 
> <a href="#" id="hide1"> hide row 1 </a>
> 
> and js:
> $(document).ready(function(){
>        $("#hide1").click(function () {
>             $("#row1").show("slow");
> //            $("#row1").show(); -> it works fine, but no effects. I
> this that is single solution.
>             return false;
>         });