i have managed to pull this off pretty well, with no apparent
glitch's
http://www.renderrobot.com/?p=33
as explained to make it load closed just remove the "open" class from
the html, should do the trick
On Sep 12, 8:34 pm, "Rob Fletcher" <[EMAIL PROTECTED]> wrote:
> Noone knows how to stabilize the animation and make this run better?
>
> On Fri, Sep 12, 2008 at 11:42 AM, RFletcher <[EMAIL PROTECTED]>wrote:
>
> > I am making an accordian menu with 4 main buttons. All buttons should
> > be closed at start. When you click 1 button the content area should
> > slide down and then the content should fade-in. I have for the most
> > part written the script to create this effect however i see some
> > glitches with it. When you click the next tab i can see the two
> > buttons at the bottom moving up and down slightly. Its not a huge
> > deal, but i would rather them not move at all. I only want the button
> > i click to move.
>
> > Here is my script, please let me know if there is a better way to
> > write this as many google searches didn't reveal anything good. I'm
> > sure someone else has wanted to make an accordian menu (slide and then
> > fade-in) effect.
>
> > $(document).ready(function() {
> > $("dd").hide();
> > $("span").hide();
>
> > $("dt a").click(function () {
>
> > $("span").fadeOut(100);
>
> > $("dd:visible").slideUp("slow");
>
> > $(this).parent().next().slideDown("slow", function () {
> > $("span").fadeIn("slow");
> > });
> > return false;
> > });
> > });
>
> > And my HTML code looks like this:
>
> > <dl>
> > <dt><a href="#" class="button1"></a></dt>
> > <dd>
> > <div id="ContentBox">
> > <span class="msg_body">
> > <div id="box1">
> > <h1>Loreum Ipsum</h1>
> > <p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
> > consequat qui Investigationes Investigationes. Ut quam me gothica
> > dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
> > et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
> > facilisis et nis4</p>
>
> > <h1>Loreum Ipsum</h1>
> > <p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
> > euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
> > Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
> > hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
> > nis4</p>
> > </div>
> > </span>
> > </div>
> > </dd>
> > </dl>
>
> > <dl>
> > <dt><a href="#" class="button2"></a></dt>
> > <dd>
> > <div id="ContentBox">
> > <span class="msg_body">
> > <div id="box2">
> > <h1>Loreum Ipsum</h1>
> > <p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
> > consequat qui Investigationes Investigationes. Ut quam me gothica
> > dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
> > et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
> > facilisis et nis4</p>
>
> > <h1>Loreum Ipsum</h1>
> > <p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
> > euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
> > Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
> > hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
> > nis4</p>
> > </div>
> > </span>
> > </div>
> > </dd>
> > </dl>
>
> > <dl>
> > <dt><a href="#" class="button3"></a></dt>
> > <dd>
> > <div id="ContentBox">
> > <span class="msg_body">
> > <div id="box3">
> > <h1>Loreum Ipsum</h1>
> > <p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
> > consequat qui Investigationes Investigationes. Ut quam me gothica
> > dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
> > et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
> > facilisis et nis4</p>
>
> > <h1>Loreum Ipsum</h1>
> > <p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
> > euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
> > Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
> > hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
> > nis4</p>
> > </div>
> > </span>
> > </div>
> > </dd>
> > </dl>
>
> > <dl>
> > <dt><a href="#" class="button4"></a></dt>
> > <dd>
> > <div id="ContentBox">
> > <span class="msg_body">
> > <div id="box4">
> > <h1>Loreum Ipsum</h1>
> > <p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
> > consequat qui Investigationes Investigationes. Ut quam me gothica
> > dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
> > et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
> > facilisis et nis4</p>
>
> > <h1>Loreum Ipsum</h1>
> > <p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
> > euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
> > Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
> > hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
> > nis4</p>
>
> > </div>
> > </span>
> > </div>
> > </dd>
> > </dl>
