Animated Collapsible DIV v2.4 (smooth)

[europe451]

1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:

So the script is working more or less the way it should. The only problem I am having is the motion is not smooth. When it expands and/or collapses the motion is jerky.

http://www.luckyflagmedia.com/banana...akeaction.html

I don't think I missed any steps, but any help would be appreciated.

[ddadmin]

I'm fairly certain the issue has something to do one or more of your rules inside one of your CSS files (most likely css_main.css), though I can't say which one. Generally the jerky motion will occur with the animated DIVs if you've added some sort of margin or padding to the DIVs- when the script slides that DIV in, at the very end, the margin/padding is applied to the DIV, resulting in the sudden increase in height of the DIV and hence the jerky motion. I would try creating a clean page with just the animated DIVs in it, then slowly add back your CSS styles onto the page, making sure each step of the way the stuttering isn't there.

[europe451]

Thanks for the response, but no luck so far.

http://www.luckyflagmedia.com/bananaland/test.html

There is basically no padding on anything and barely any margins. Which I did take away and had no luck.

body {
	background-color:#efc84f;
	margin: 0 0;
	font-family: Arial, Verdana, Tahoma, sans-serif;
	font-size: 12px;
	line-height: 1.5em;
	clear: both;
	width:1250px;
	height: 768px;
}
#wrap {
width: 100%;
height: auto;
margin-top: 5px;
text-align: left;
border-color:#000000;
}
.subtext {
}
.subtext p{
width: auto;
height: auto;
text-align: justify;
margin:0;
color: white;
font-size:14px;
}
.subtext a{
color: #a96024;
text-decoration:underline;
font-size:14px;
}
.subtext a:hover{
color:#b98153;
}
.content{
clear:both;
float: left;
width: 100%;
height: auto;
margin:0;
}
.content br{
clear:both;
}
.contentL{
float: left;
width: 50%;
height: auto;
margin:0;
}
.contentR{
float: right;
width: 49%;
height: auto;
margin:0;
}
.listcheck{
background: url(../img/listcheck.gif) no-repeat;
background-position:0 0 15px 0;
margin-left:60px;
color:white;
font-size:16px;
line-height:20px;
}
.spacer_30{
margin-left:30px;
}
#topic_holder{
width:auto;
height: auto;
}
#topic_holder hr{
clear:both;
margin-top:10px;
margin-bottom:10px;
}
.topic {
height: auto;
width:auto;
float:left;
clear:both;
}
.topic a{
text-align: left;
margin-left:10px;
color: #000000;
font-size:22px;
font-weight:bolder;
text-decoration:none;
}
.topic a:hover{
color: #66672e;
text-decoration:underline;
}
.topic img{
border:0;
margin:0 0 0 60px;
padding-bottom:0;
}

[ddadmin]

After some testing, it seems the culprit are the <p> tags inside your collapsible contents. Apparently they also do not reveal their heights (similar to padding/margin) until the content is fully expanded. This causes the sudden jerk in motion as the DIV expands in height at the very end. Instead of using <p> tags, can you just use <br /> for example to create the necessary spacing between contents within the DIVs?

[andycain]

Sorry to hijack this thread but I am also having this problem and can confirm that is definatley the content that causes the jerkyness.

The content of the div I am collapsing is as follows:

<table  id="health_assessments" cellspacing="0">
            <th colspan="10"></th>
            <tr>
            <td></td>
            <td class="sub">DATE</td>
            <td class="sub">HEIGHT</td>
            <td class="sub">WEIGHT</td>
            <td class="sub">BMI</td>
            <td class="sub">BMR</td>
            <td class="sub">BODYFAT</td>
            <td class="sub">BP SYS</td>
            <td class="sub"><p>BP Di</p></td>
            <td class="sub">RESTING HR</td>
            </tr>
            <?php 
            for ($i=0; $i<$count; $i++)
            {
                echo $output[$i];
            }
            ?>
            </table>

Is there a way I can modify my CSS to make this animation smooth? All the cells have height attributes, as does the entire table.

This script works smoothly in FF but not in IE.

[FrankF]

Two years later, this newbie (WIndows 7, Google Chrome) is having the same problem, and none of the solutions mentioned so far in this thread are solving the problem.

The page: www.gustav-mahler.org/english
(test in Chrome or Firefox, in IE9 there is no problem)

There are no <p>'s in the content, the problem persists when the CSS for margins and line-height is removed, and the following happens: when a menu item is toggled several times in succession, the jerky motion only occurs the first time the div is opened and closed! Subsequent togglings are perfectly smooth. I hope that this would provide a clue to making the first expanding of the div also smooth.

[mda]

I was having the same problem, both with scripts from DD and elsewhere, when animating / sliding to reveal and hide divs... the divs would slide to reveal the content and once fully revealed would jump up a little. I am using <p> and <h1> tags.

Adding <br> to the inside top of the animated divs the content smoothly slides in and out, although does add some extra space at the top of course. Whether you can live with that is a matter of taste or design requirements, but this isn't a problem for my layout / presentation.