CODEWITHSUNDEEP
jqueryanimationhtmlslidetoggle
Artur Stöber
Artur Stöber

Reputation: 43

jQuery slideToggle just shows and hides but doesn't animate correctly

In this example my div container just hides and shows but doesn't do the awesome jQuery animation.

$('.button').click(function() {
    $('.class1').slideToggle();
});

Can anybody say me why? I know that animations on tables don't work correctly but on divs it should be okay.

UPDATE Thanks for all the answers. The information I was missing is that position absolute removes the element from the DOM. And yeah I know I should put the style in a css--this version was just for quick testing, but thanks for the answers!!!

Upvotes: 3

Views: 15012

Answers (4)

NotDragon
NotDragon

Reputation: 77

use JQuery UI

$(document).ready(function() {
    $('.button').click(function() {
        $('.class1').toggle('slide',{direction: 'up'},500);
    });
});

Upvotes: 1

Dom
Dom

Reputation: 40459

Artur, my recommendation is to restructure your code entirely, there is way too much going on. Short and simple is always best. I'd start by getting rid of the "style" attributes in your html. Make sure to put styles in CSS (it's cleaner and easier to maintain -- much better than deleting styles from multiple tags).

I just made you a demo, hope it helps! Feel free to use it! Happy coding! http://jsfiddle.net/7xzMa/17/

Upvotes: 1

alwayslearning
alwayslearning

Reputation: 411

UPDATED YOUR FIDDLE - http://jsfiddle.net/7xzMa/14/ --- cleaned the divs and you should place css into a style sheet so its easier to edit. "display" should be set to "none". unless you would like it to be visible then click to hide. http://jsfiddle.net/7xzMa/8/

Upvotes: 1

Wesley
Wesley

Reputation: 5621

.slideToggle() animates the height of an element from 0% - 100%, hiding its children as it goes.

By using position:absolute throughout your fiddle, you are removing the child elements from the flow of the DOM and interfering with the ability of the parent element to incrementally hide its children.

If you set overflow to hidden, and remove position:absolute from the children, this works properly.

http://jsfiddle.net/7xzMa/6/

Upvotes: 7

Related Questions