jquery css behaviour

Question

Having a spot of bother with the following code. Essentially I have a div container that is height:40px, when I click on it, it smoothly grows to 320px - this works great, however when the div has grown to full height, I then want the overflow property to change from it's static state of hidden, to visible.

$(document).ready(function() {
    $('#join').click(function() {
        $('#join').animate({ height: "320px" }, 500);
        $('#join').css('overflow', 'visible');
    })
});

It does go visible for a few seconds but then disappears, also I want it to happen after the div has grown to full height.

Selvakumar Arumugam · Accepted Answer · 2012-05-23 19:10:34Z

4

Apply the style inside the animate callback function.. See below,

$(this).animate({height:"320px"}, 500, function () { //this <- #join
   $(this).css('overflow', 'visible');
});

Complete code:

$(document).ready(function() {
   $('#join').click(function() {
       $(this).animate({height:"320px"}, 500, function () {
            $(this).css('overflow', 'visible');
       });
   });
});

answered May 23, 2012 at 19:10

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gdoron Over a year ago

Note that, the first DOM query can be avoid as well.

gdoron Over a year ago

@PeteNorris. Family hug... :)

gdoron · Accepted Answer · 2012-05-23 19:10:31Z

3

Then pass it as a callback:

$(this).animate({height:"320px"}, 500, function(){
    $(this).css('overflow', 'visible')
});

Full code:

$(document).ready(function() {
    $('#join').click(function() {
        $(this).animate({
            height: "320px"
        }, 500, function() {
            $(this).css('overflow', 'visible');
        });
    });
});

answered May 23, 2012 at 19:10

gdoron

151k59 gold badges302 silver badges376 bronze badges

2 Comments

Selvakumar Arumugam Over a year ago

Typo :P {); in $(this).animate({height:"320px"}, 500, function(){);

gdoron Over a year ago

@Vega. You meant "by whole 3 seconds!" :-)

Collectives™ on Stack Overflow

jquery css behaviour

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest