Animate css effect - JQuery

Question

I have a table. The row is given specific height and overflow is set to hidden. On click, the row will expand down showing hidden contents. I have done this using toggle method. The styling is altered to show contents. This works perfect. But I want to add some sliding animation effect to this. The expansion of row happens immediately after I click it. Instead, I want this to happen in a smooth animated format, like in some jQuery menus. Also I want to hide one open row if another row expands.

You can see a working fiddle Here

Roko C. Buljan · Accepted Answer · 2011-08-28 18:48:02Z

Just a way how to do that:
- Set the height of 40px via jQuery, but before doing that, calculate the height of the 'opened' element.
-Than just animate on click.

DEMO

var cl4h = $('.class4').height(); // get the height of the opened .class4

$('.class4').css({ height:'40px' }); // set height to 40px;

$('.class4').toggle(function() {
    $(this).animate({ height: cl4h });
}, function() {
    $(this).animate({ height: '40px' });
});

P.S.
Remove height: 40px; for the el .class4 from your CSS

If you have to use more than one class here is a demo using tha jQuery .data() :

DEMO with .data()

$('.class4').each(function(e) {
    var cl4h = $(this).height();    // get height of each element
    $(this).data('height', cl4h);   // and store it into .data (for each el)
});

$('.class4').css({height: '40px'}); // set heights to 40px on page load

$('.class4').toggle(function() {   
   $(this).animate({height: $(this).data('height') }); // call the el .data where is stored the el height
}, function() {
   $(this).animate({height: '40px'});
});

Hi @roXon, I am marking this as answer. The script is caching a variable to set the height. This is the original height of the first row only. But if i have a text lengthier than the first row, only a small porion of it is visible on toggle. you can see a working fiddle here jsfiddle.net/blasteralfred/vce6W/1 . do u hav any solution??
jsfiddle.net/roXon/vce6W/2 Just the first solution I immagined. There are other ways to achieve the same
And for your 'thanks bro' ... here is a demo usind the jQuery .data() DEMO FIDDLE It's more easy and 'fancy'.

Sam Starling · Accepted Answer · 2011-08-28 08:54:35Z

1

Instead of using .css() to change the display property, try having it as display: block; and instead use .animate() in the same place to animate the height of the element.

answered Aug 28, 2011 at 8:54

Sam Starling

5,3743 gold badges37 silver badges53 bronze badges

1 Comment

Alfred Over a year ago

Hi @Sam, I marked roxon's answer. The script is caching a variable to set the height. This is the original height of the first row only. But if i have a text lengthier than the first row, only a small porion of it is visible on toggle. you can see a working fiddle here jsfiddle.net/blasteralfred/vce6W/1 . do u hav any solution??

Tieson T. · Accepted Answer · 2011-08-28 08:59:57Z

0

You could also use the .fadeIn() and .fadeOut() animations, using the linear easing option. This will give you a nice transition effect, as .fadeIn() (obviously) doesn't happen all at once.

answered Aug 28, 2011 at 8:59

Tieson T.

21.2k6 gold badges82 silver badges99 bronze badges

Collectives™ on Stack Overflow

Animate css effect - JQuery

3 Answers 3

DEMO

DEMO with .data()

3 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Related