Question

我对jQuery div动画有一些疑问。我想点击链接，然后div1和div4改变位置。 div2和div3改变位置。数组位置在第一行是div1 div2，在第二行是div3 div4。怎么写得正确？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{width:100%;height:100%;margin:0;padding:0;}
.content{width:600px;margin-left:auto;margin-right:auto;padding:0;}
.div1,.div2,.div3,.div4{float:left; width:300px; height:200px;margin:0;padding:0;position:relative;}
</style>
</head>
<body>
<div class="content">
    <div class="div4" style="background-color:#0f0;"><a href="#" class="click">4</a>
    </div>
    <div class="div3" style="background-color:#f00;"><a href="#" class="click">3</a>
    </div>
    <div class="div2" style="background-color:#0ff;"><a href="#" class="click">2</a>
    </div>
    <div class="div1" style="background-color:#ff0;"><a href="#" class="click">1</a>
    </div>
</div>
<script type="text/javascript">
$(function() {
   $('.click').each(function() {
      $(this).click(
          function() {
          $('.div1').stop().animate({ top: 200 , left: 300 });
             $('.div2').stop().animate({ top: 200 , left: 0 });
             $('.div3').stop().animate({ top: 0 , left: 300 });
             $('.div4').stop().animate({ top: 0 , left: 0 });
          })
      });
});
</script>
</body>
</html>

我可以设置相对于div＃内容的位置的动画吗？例如，动画到前200，左300，就像写一个新的CSS规则，div＃content的前200px和div＃content的300px？

Answer 1

<script type="text/javascript">
$(function() {
  $('.click').bind('click', function(){
    $('.div1').stop().animate({ top: 200 , left: 300 });
    $('.div2').stop().animate({ top: 200 , left: 0 });
    $('.div3').stop().animate({ top: 0 , left: 300 });
    $('.div4').stop().animate({ top: 0 , left: 0 });
  });
});
</script>

jQuery div相对于容器的动画

1 个答案: