JQuery 实现动画与特效练习1

最新推荐文章于 2020-07-17 15:55:58 发布

潇潇雨歇_

最新推荐文章于 2020-07-17 15:55:58 发布

阅读量1.2k

点赞数

文章标签：密码动画管理 jquery 前端

本文链接：https://blog.csdn.net/linhaiyun_ytdx/article/details/53114441

版权

JQuery+Ajax 学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.简单的动画函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的动画函数</title>
<style type="text/css">
 input{
     border:1px solid #060;
     font-size:14px;
     padding:4px;
     font-family:Arial, Helvetica, sans-serif;
     background-color:#999;
     color:#0FF;
 }
</style>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
 $(function(){
    $("input:eq(0)").click(function(){
        //$("img").hide("fast");  //$("img").hide("normal");  //$("img").hide("slow");//动画消失的时间
        $("img").hide(3000,function(){
            alert("完成了！")
        });
    });
     $("input:eq(1)").click(function(){
        $("img").show(3000);//显示图像
    });
    
     $("input:eq(2)").click(function(){
        $("img").toggle(3000);//可以显示或隐藏图片
    });
    
     $("input:eq(3)").click(function(){
        $("img").fadeOut(3000);//从不透明变透明
    });
    
     $("input:eq(4)").click(function(){
        $("img").fadeIn(3000);//从透明变不透明
    });
    
     $("input:eq(5)").click(function(){
        $("img").fadeToggle(3000);//透明不透明相互转换
    });
    
    $("input:eq(6)").click(function(){
        $("img").fadeTo(3000,0.2);//指明到相关的透明度
    });
    
    $("input:eq(7)").click(function(){
        $("img").slideUp(3000);//收起
    });
    
    $("input:eq(8)").click(function(){
        $("img").slideDown(3000);//展开
    });
    
    $("input:eq(9)").click(function(){
        $("img").slideToggle(3000);//收起或展开
    });
    
 });
 
</script>
</head>
<body>
  <input type="button" value="Hide"/>
  <input type="button" value="Show"/>
  <input type="button" value="toggle"/>
  <input type="button" value="FadeOut"/>
  <input type="button" value="FadeIn"/>
  <input type="button" value="FadeToggle"/>
  <input type="button" value="FadeTo"/>
  <input type="button" value="slideUp"/>
  <input type="button" value="slideDown"/>
  <input type="button" value="sledeToggle"/>
  <p><img src="jia.jpg" width="100px" height="100px"</p>   
</body>
</html>

截图：

2.自定义动画方法animate()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义动画方法animate()</title>
<style type="text/css">
 div{
     position:absolute;
     left:20px;
     top:50px;
     background-color:#FF0;
     height:140px;
     width:180px;
     border:5px solid #069;
     margin-top:5px;
     padding:5px;
     text-align:center;
 }
</style>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
 $(function(){
    $("#go1").click(function(){
        $("#block").animate({
            opacity:"0.5",
            width:"80%",
            height:"200px",
            borderWidth:"10px",
            fontSize:"30px",
            marginTop:"40x",
            marginLeft:"20px",    
        },3000);//设置要变化的元素
    });
    
    $("#go2").click(function(){
        $("#block").animate({
            opacity:"0",
            width:"0",
            height:"0",
        },2000);
    });
    
        $("#go3").click(function(){
        $("#block").animate({left:"400px"},2000)
                   .animate({top:"300px"},2000)
                   .animate({opacity:"0.5"},2000,function(){
                     $(this).css("borderWidth","0px");
                   });
    });
 });
 
</script>
</head>
<body style="background:url(jia.jpg); width:500px; height:500px">
 <button id="go1">Go1</button><button id="go2">Go2</button><button id="go3">Go3</button>
 <div id="block">动画！</div>
</body>
</html>

截图：