jquery animation and binding
<p>I have some jQuery that is dynamically creating a span element with a certain shape defined by css. The span elements are generated at a random x,y location on the screen and I have defined them with class=".drawingpix". A new span element identical to the last, except it's location is created every second or two. I want to be able to animate the element when clicked. So far I have only be able to animate all of the elements when the body is clicked.</p>

<p>What I want to happen: I would like to animate the element when touched or clicked and only that one element.</p>

<p>This gets me nothing when in the head:</p>

<pre><code>    $('.drawingpix').click(function () {
    // this is the dom element clicked?????
    var element = this;
    $(this).animate({
        height:'250px',
        width:'250px',
        'border-radius':'250px',
        '-moz-border-radius': '250px',
        '-webkit-border-radius': '250px',
        opacity: -0.2,
            }, 3000).fadeOut(0);    
});
</code></pre>

<p>This animates every element with the class 'drawingpix' when in the body but nothing when in the head.:</p>

<pre><code>    $('body').click(function () {
    // this is the dom element clicked?????
    var element = this;
    $('.drawingpix').animate({
        height:'250px',
        width:'250px',
        'border-radius':'250px',
        '-moz-border-radius': '250px',
        '-webkit-border-radius': '250px',
        opacity: -0.2,
            }, 3000).fadeOut(0);    
});
</code></pre>

<p>I am new to jquery and javascript. I have done hours of searching and trying different things before I have posted here.</p>

<p>I think I need to some how get the index of the element I clicked and specify which element to animate based off of the index. Any help will be appreciated. Thanks!</p>
