Jquery .animate not working for fixed position

Question

This is my .animate function

<script>
       $(document).ready(function(){
$('#slide').click(function(){
$('#2guns').animate({right: 500},10000);
});
});
</script>

And this is the element I'm animating

 <div class="content">
            <button id="slide">slide</button>
           <img src="/home/varun/Documents/Crown/images/line.png" id="2guns" STYLE="position:absolute;left:1293px;">
        </div>

It works perfectly without the attribute

left:1293px;

Any solutions?

Answer 1

Here it is http://jsfiddle.net/kD3Zt/

 <div class="content">
        <button id="slide">slide</button>
       <img src="/home/varun/Documents/Crown/images/line.png" id="2guns" STYLE="position:absolute;left:1293px;">
    </div>

---

 $(document).ready(function(){
 $('#slide').click(function(){
 $('#2guns').animate({left: 200},10000);
 });
 });

Answer 2

Do this instead, element can't have both left and right as style

$('#2guns').animate({left: 500},10000);

DEMO

Answer 3

Why you want to give left, please specify...

I tried it with right and it works fine...

<div class="content">
            <button id="slide">slide</button>
           <img src="/home/varun/Documents/Crown/images/line.png" id="2guns" STYLE="position:absolute; right:0px;">
        </div>