Question

I’m trying to animate a div’s width after the page loads, but I cannot get it to work.

Basically the div is set to display:none and I want to animate it’s width after the page is ready.

<script>


$(document).ready(function() {

   $('.graph').animate({width:"40%"},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
</script>

.graph {width: 400px;
height: 250px;
position: absolute;
background-image: url(../images/roll.png);
display: none;
}

I can never get jquery to work, sigh.

Answer 1

jQuery doesn’t know to make your element visible all on its own. You’re telling it to animate the width of an element that you’ve explicitly told your browser to hide, using CSS. As such, you need to first show the element, and then animate it:

$(function(){
    $("#foo")
        .show()
        .animate(
            { width: "40%" }, 
            { duration: 600, easing: 'easeOutBounce' }
        );    
});

Fiddle: http://jsfiddle.net/kjCnX/1/