爱奇思

学习就是——从糊涂中慢慢走向清醒，然后再从清醒中慢慢走向糊涂，所以说我说它是一个O,只是圆的半径慢慢的扩大罢了！
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

拿jquery做动画效果（一）

Posted on 2010-05-24 16:00  牛牛博客  阅读(1045)  评论(0)  编辑  收藏  举报
<!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>
    <title>效果</title>
    <style type="text/css">
      .item{cursor:pointer; float:left; width:200px;height:100px;font-size:12px;border:1px #dfdfdf solid; overflow:hidden; background:#000;color:#fff; position:relative;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);}
      .item p{width:100%;padding-top:5px;position:absolute;height:70px;top:0px; text-indent:10px; overflow:hidden;display:block;}
      .item h4{ text-align:center;}
      
      .item_title{width:100%;position:absolute;top:70px;margin:0 auto;font-size:16px; background:#f00; text-align:center; font-weight:bold; font-family:微软雅黑; vertical-align:middle; height:30px; line-height:30px;}
     
      .item1{ cursor:pointer; float:left; width:200px;height:30px;font-size:12px;border:1px #dfdfdf solid; overflow:hidden; background:#000;color:#fff; position:relative;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);}
      .item1 p{width:100%;padding-top:5px;position:absolute;height:70px;top:30px; text-indent:10px; overflow:hidden;display:block;-moz-opacity:0.2;opacity:0.2;filter:alpha(opacity=20);}
      .item1 h4{ text-align:center;}
      .item1_title{width:100%;position:absolute;top:0px;margin:0 auto;font-size:16px; background:#f00; text-align:center; font-weight:bold; font-family:微软雅黑;-moz-opacity:1;opacity:1;filter:alpha(opacity=100); vertical-align:middle; height:30px; line-height:30px;}
    </style>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
</head>
<body>
拿juery做动画效果一
<div class="item">
   <p class="item_des">
      包含css、js文章，代码下载，包含css、js文章，代码下载，包含css、js文章，代码下载，代码下载，代码下载
   </p>
   <div class="item_title">css/js</div>
</div>
<div class="item1">
   <p class="item1_des">
      widget含css、js文章，代码下载，包含css、js文章，代码下载，包含css、js文载，代码下载。
   </p>
   <div class="item1_title">Widget</div>
</div>
    <script language="javascript" type="text/javascript">
$(".item1_title").click(function(){
//  $(".item_title").stop();
//  $(".item_des").stop();
//  $(".item").stop();
  
  
  $(".item_title").animate({ 
   top:"0px",opacity:"1"
  }, 800 );
  $(".item_des").animate({ 
   top:"30px",opacity:"0.2"
  }, 800 );
  $(".item").animate({ 
   height:"30px"
  }, 800 );
  
  $(".item1_title").animate({ 
   top:"70px",opacity:"0.6"
  }, 800 );
  $(".item1_des").animate({ 
   top:"0px",opacity:"1"
  }, 800 );
  $(".item1").animate({ 
   height:"100px"
  }, 800 );
});
$(".item_title").click(function(){
//  $(".item1_title").stop();
//  $(".item1_des").stop();
//  $(".item1").stop();


  $(".item_title").animate({ 
   top:"70px",opacity:"0.6"
  }, 800 );
  $(".item_des").animate({ 
   top:"0px",opacity:"1"
  }, 800 );
  $(".item").animate({ 
   height:"100px"
  }, 800 );
  
  $(".item1_title").animate({ 
   top:"0px",opacity:"1"
  }, 800 );
  $(".item1_des").animate({ 
   top:"30px",opacity:"0.2"
  },800 );
  $(".item1").animate({ 
   height:"30px"
  }, 800 );
});
    </script>
</body>
</html>