Question

I created a graph using html, now I want to give it a nice effect when it initially loads. I want the bars of the graph to fly in from the left. The code below does that, only problem is each bar ends up with 70% width (obviously since I set that in the jQuery code). Instead I need that number to be unique to the width set within the bars (span tags). I assume the answer would be something like:

$(this).attr('width')...

but I can’t get it to work, please help.

The Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<style type="text/css">

div.graph { display: none; border: 1px solid red; height: 200px; width: 400px; margin: 0 auto; }

div.graph span { display: none; display: block; background: red; height: 20px; margin-bottom: 10px; }

</style>

<script type="text/javascript">
$(document).ready(function() {

    $('div.graph').fadeIn('slow');

    $('div.graph > span').animate({
        width: "70%"
    }, 1500 );

});
</script>

<div class="graph">
    <span style='width:10%'></span>
    <span style='width:40%'></span>
    <span style='width:25%'></span>
    <span style='width:15%'></span>
    <span style='width:10%'></span>
</div><!-- graph -->

Answer 1

Try this on for size:

$('div.graph > span').each(function(){
    var w=$(this).width();
    $(this).width(0);
    $(this).animate({
        width: w
    }, 1500 );
});