首页 文章

jQuery div相对于容器的动画

提问于
浏览
0

我对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?

1 回答

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

相关问题