JQuery简单动画效果演示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery动画效果演示</title>
<style type="text/css">
   div{
      width: 300px;
      height: 300px;
      background-color: yellow;
      float: left;
      margin: 10px;
   }
</style>

<script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
function func01(obj){
   if(obj.value=='隐藏'){
     $("#d1").hide("slow");
     obj.value='显示';
   }else{
     $("#d1").eq(0).show("slow");
     obj.value='隐藏';
   }
}
function func02(obj){
   if(obj.value=='隐藏'){
     obj.value='显示';
   }else{
     obj.value='隐藏';
   }
   //$("#d1").toggle("slow");//切换显示隐藏
   $("#d1").slideToggle("slow");//切换显示隐藏
}
function func03(obj){
   $(".c1").fadeTo("slow",0.3);//变透明
$("div[id=d1]").toggle(
     function(){
          $(this).css("backgroundColor","red");
        },
     function(){
          $(this).css("backgroundColor","green");
        },
     function(){
          $(this).css("backgroundColor","blue");
        }
       );
}
function func04(obj){
   //渐变动画效果
   $(".c1").animate({height:500,width:500},
        "slow",
        function(){
          $(this).css("backgroundColor","red");
          $(this).html("<h2>效果变完了</h2>");
          }
             );//渐变效果
}
</script>
</head>
<body>
<input type="button" value="隐藏" onclick="func01(this);">
<input type="button" value="隐藏" onclick="func02(this);">
<input type="button" value="透明" onclick="func03(this);">
<input type="button" value="动画" onclick="func04(this);">
<hr>
<div id="d1">第一个</div>
<div id="d1">第二个</div>
<div id="d1">第三个</div>
<div class="c1">第四个</div>
<div class="c1">第五个</div>
</body>
</html>

JQuery简单动画效果演示

猜你喜欢