Jquery让指定元素左右移动问题

菜鸟求解，在线等，解决了马上给分结贴
代码如下：
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function()
  {
  $(".btn1").click(function(){
    $("#box").animate({height:"300px"});
$(".test").animate({left:'+200px'},"slow");
  });
  $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
<style>
.test{background:#98bf21;height:100px;width:100px;margin:6px;}
</style>
</head>
<body>
<div id="box"  class="test">11
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>请问为什么$(".test").animate({left:'+200px'},"slow");
这一句没有效果？

解决方案 »

  1.   

    加一个position：relative 就可以了  css中啊
      

  2.   


    <html>
    <head>
    <style>
    .test{background:#98bf21;height:100px;width:100px;margin:6px;}
    </style>
    <script type="text/javascript" src="jquery-1.8.0.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
      {
    $(".btn1").click(function(){
    $("#box").animate({height:"300px"});
    $(".test").animate({left:'+200px'},"slow");
    });
    $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
    });
    });
    </script></head>
    <body>
    <button class="btn1">Animate</button>
    <button class="btn2">Reset</button>
    <div style="position:absolute" id="box"  class="test">11</div></body>
    </html>跟你的代码一样就是多加了一个 div中 style="position:absolute"