Chaps, something that occurred to me today. If I have a div with display:hidden; and I want it to unhide it and animate it at the same time with animate(), how do I achieve that? I had a look at the jquery API and it says that animate() unlinke slideDown() etc doesn't unhide the element so it has to be done in a different way. I am aware of course of other methods like show() etc but I wan't to use animate() for some extra zest if you like.
I run a couple of tests to try whether a hidden element still has a width (using .width())and to my surprise it has, so there it goes my attempt to give the element a width in the animation. How should I proceed, any suggestion at all?

Hi iamthwee, yes sorry I should have said I have looked at the other options too, but I specifically wanted to use animate() if possible. With the element hidden I got it back with
changing the opacity to "show" which is quite odd because even when the element has display:none; the opacity seems to be 1. This is the script:

    //console.log("script running");
    var $paymentBlock = $(".payment-block-grey");
    //console.log("paymentBlock class is " + $paymentBlock.attr("class"));
    console.log("width of hidden is " + $paymentBlock.width() + " opacity of it is " + $paymentBlock.css("opacity"));
    $(".grey-button a").click(function(e){
            "opacity": "show"


Is changing the opacity of an element to "show" the right way to make the element visible? I have tried with

            "display": "block"

but it doesn't work. Why? Back to your suggestion iamthwee, if I use fadeIn() can I then somehow chain the animate() method to it?

A few things...

Maybe try setting the property to visible as well if the initial div is hidden.

Or instead of using hidden maybe set the div to a alpha transparency of background and use animate to change the alpha transparency so it is now visible.

Also posting an example of what you have tried on jsfiddle would help.