您的位置：首页 > Web前端 > JQuery

JQuery简单动画效果演示

2018-02-01 09:52 274 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Java JQuery HTML

相关文章推荐

新的分享

章节导航