CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
damir gasparlin
damir gasparlin

Reputation: 35

Change insertAfter into .animate

I have jquery code that slides up or down elements in the div. This is from http://toddmotto.com/labs/superbox/

When one item is clicked it slides down larger div. I like the slideDown effect but it opens all other divs at same time

My question is: is there a way to animate css display:block ?

Turn this: $('.myClass').insertAfter(this).css('display', 'block');

Into this: $('.myClass').animate({display: 'block'}, {duration: 700});

But .animate({display: 'block'}, {duration: 700}); It does not work.

I tried this too:

$('.myClass').insertAfter(this).animate({display: 'block'}, {duration: 700});

but it does not open the large hidden div.

Here is part of jquery

if ($(this).hasClass('currentbox')) {

    /**** If next inline item is clicked - gets class currentbox - slide toggle *****/
    $('.superbox-show-'+currentbox).slideToggle(700);

} else {

    /**** Initial-First click, If click is first time or box is hidden*****/

    /**** I like the slideDown effect but it opens all other hidden divs at same time *****/
    //$('.superbox-show-'+currentbox).slideDown(700);

    /**** I have to use this which does just opens the large div with no effect *****/

    $('.superbox-show-'+currentbox).insertAfter(this).css('display', 'block');

    /**** Hide all other divs *****/
    $('.superbox-show-'+currentbox).nextAll('.superbox-show').css('display', 'none');
    $('.superbox-show-'+currentbox).prevAll('.superbox-show').css('display', 'none');

}

Upvotes: 0

Views: 172

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

But .animate({display: 'block'}, {duration: 700}); It does not work.

try 

$('.myclass').show(700);

If you just use .show() without any number or 'slow' or 'fast' in the middle, it will just show right away with no animation. But if you use a number, like 700 , which is 700 miliseconds , it will perform a type of animation showing the element.

Upvotes: 1

Related Questions