reveal element with animate()

[Violet_82]

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?
thanks

[iamthwee]

try using fadein()

or http://api.jquery.com/toggle/

[Violet_82]

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:

$(document).ready(function(){
    //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){
        e.preventDefault();
        //$paymentBlock.slideDown();
        $paymentBlock.animate({
            "opacity": "show"
        },5000)
    });

});

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

$paymentBlock.animate({
            "display": "block"
        },5000)

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?

[iamthwee]

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.