0

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

2
Contributors
3
Replies
18
Views
4 Years
Discussion Span
Last Post by iamthwee
0

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?

Edited by Violet_82

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.