Question

My objective is to create a generic function for animation which would require to pass in parameters, assuming the function can be used for animating any elements.

I started with simple animation that wouldn’t require passing parameters and it seems to work fine. Here is the code and link

<div id="outer" class="box">
    <div id="inner" class="box"></div>
</div>
<input type="button" id="animate" value="Animate"/>​     
​$("#inner").animate({left: '+=300', top: '+=300'}, 1000);​

BUT its not working when I try to write a genric function… code

$("#animate").Click(function(){
    diagonalAnimation("inner");
});

function diagonalAnimation(e){
$('"#'+e+'"').animate({left: '+=300', top: '+=300'}, 1000);
}

Answer 1

jsFiddle( http://jsfiddle.net/5v86F/81/ )

<div id="outer" class="box">
    <div id="inner" class="box"></div>
</div>

<input type="button" id="animate" value="Animate" onclick="animate('inner')"/>

<script>
    function animate( item )
    {
         $( "#" + item ).animate({left: '+=300', top: '+=300'}, 1000);
    }
</script>