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.

Answer 1

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');
       });
   });
});