JavaScript >jquery>动画制作

2019年5月19日 157次阅读 来源: 命运丿 
  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/lib/jquery2.2.4/jquery-2.2.4.min.js"></script>
<style>
    #box{
        width: 400px;
        height: 400px;
        background: red;
    }
</style>
</head>
<body>
<button id="btn1">显示--动画效果</button>
<button id="btn2">隐藏--动画效果</button>
<button id="btn3">显隐--动画效果</button>
<button id="btn4">卷帘拉开--动画效果</button>
<button id="btn5">卷帘收起--动画效果</button>
<button id="btn6">卷帘显示/隐藏--动画效果</button>
<button id="btn7">透明显示--动画效果</button>
<button id="btn8">透明隐藏--动画效果</button>
<button id="btn9">透明显示/隐藏--动画效果</button>
<button id="btn10">透明指定透明度--动画效果</button>
<button id="btn11">自定义动画[常用]</button>
<div id="box"></div>

<script>
$(function() {
    // 给按钮绑定单击事件，测试各种动画效果：熟悉API文档
    // API：application program interface 应用程序开发接口 文档
    $("#btn1").click(function() {
        $("#box").show(2000);// show("fast"/"slow"/1000)
    });

    $("#btn2").click(function() {
        $("#box").hide(2000);// show("fast"/"slow"/1000)
    });

    $("#btn3").click(function() {
        $("#box").toggle(2000);// show("fast"/"slow"/1000)
    });

    $("#btn4").click(function() {
        $("#box").slideDown(2000);// show("fast"/"slow"/1000)
    });

    $("#btn5").click(function() {
        $("#box").slideUp(2000);// show("fast"/"slow"/1000)
    });

    $("#btn6").click(function() {
        $("#box").slideToggle(2000);// show("fast"/"slow"/1000)
    });

    $("#btn7").click(function() {
        $("#box").fadeIn(2000);// show("fast"/"slow"/1000)
    });

    $("#btn8").click(function() {
        $("#box").fadeOut(2000);// show("fast"/"slow"/1000)
    });

    $("#btn9").click(function() {
        $("#box").fadeToggle(2000);// show("fast"/"slow"/1000)
    });

    $("#btn10").click(function() {
        $("#box").fadeTo(2000, 0.5);// show("fast"/"slow"/1000)
    });

    $("#btn11").click(function() {
        $("#box").animate({
            "margin-left":"500px",
            "margin-top": "50px",
            "width": "1000px",
            "height":  "100px"
        }, 2000).animate({
            "margin-left": "0px",
            "margin-top": "10px",
            "width": "100px",
            "height": "200px"
        },1000).animate({
            "margin-left": "60px",
            "margin-top": "110px",
            "width": "10px",
            "height": "20px"
        },1000).animate({
            "margin-left": "0px",
            "margin-top": "0px",
            "width": "400px",
            "height": "200px"
        },1000);
    });
});
</script>
</body>
</html>
    原文作者：命运丿
    原文地址: https://www.jianshu.com/p/f8a2ed74e4b7
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞