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>
>
