爱奇思

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

拿jquery做动画效果(一)

Posted on 2010-05-24 16:00  牛牛博客  阅读(...)  评论(... 编辑 收藏
<!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">
   
<class="item_des">
      包含css、js文章,代码下载,包含css、js文章,代码下载,包含css、js文章,代码下载,代码下载,代码下载
   
</p>
   
<div class="item_title">css/js</div>
</div>
<div class="item1">
   
<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>