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

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?

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.