jquery - Jquery .animate 不适用于固定位置

Question

这是我的 .animate 函数

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

这是我正在制作动画的元素

 <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>

没有属性它可以完美地工作

left:1293px;

有什么解决办法吗？

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

改为这样做，元素不能同时具有左右样式

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

演示

Answer 3

为什么要给左，请说明...

我用正确的方法尝试过，它工作正常......

<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>