Jquery--动画

来源：互联网发布：知乎社区编辑：程序博客网时间：2024/06/18 18:53

1、显示/隐藏
hide():隐藏
将高度、宽度、透明度变为0；display为“none”
show():显示
将高度、宽度、透明度变为初始的CSS设置的样式；display为“block”
toggle():切换
如果display为none的时候，点击一下就变成了block，反之变为none
代码：

<!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></title>    <script src="../jquery-3.2.1.min.js"></script>    <style>        #div1{            width: 1000px;            height: 1000px;            background-color: red;        }    </style></head><body>    <div id="div1"></div>    <button id="btnhide">隐藏</button>    <button id="btnshow">出现</button>    <button id="btntoggle">切换</button></body><script>    $("#btnhide").click(function(){        $("#div1").hide(1);    });    $("#btnshow").click(function(){        $("#div1").show(3000);    });    $("#btntoggle").click(function(){        $("#div1").toggle(9999);    });</script></html>

2、淡入/淡出
fadeIn():淡入
将隐藏的样式通过改变其透明度（透明度从0-1），让它显示

fadeOut():淡出
将显示的样式通过改变其透明度（透明度从1-0），让它隐藏起来

fadeToggle():淡入淡出的切换
如果样式隐藏，则将它显示出来
如果样式显示，则将它隐藏起来

fadeTo():固定其透明度（透明度在0-1之间）

代码：

<!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></title>    <script src="../jquery-3.2.1.min.js"></script>    <style>        #div1{            width: 100px;            height: 100px;            background-color: red;            display: none;        }    </style></head><body>    <div id="div1"></div>    <button id="btnfadein">淡出</button>    <button id="btnfadeout">淡入</button>    <button id="btnfadetoggle">切换</button>    <button id="btnfadeto">固定</button></body><script>    $("#btnfadein").click(function () {        $("#div1").fadeIn("10000");    });    $("#btnfadeout").click(function(){        $("#div1").fadeOut("10000");    });    $("#btnfadetoggle").click(function () {        $("#div1").fadeToggle();    });    $("#btnfadeto").click(function () {        $("#div1").fadeTo("slow",0.5);    })</script></html>

3、上滑/下滑
slideup():上滑
将设置的高度从初始变为0，然后隐藏它
slidedown()：下滑
将设置的高度从0变为初始
slideToggle():下滑和上滑的切换
如果元素是隐藏的，则先显示，后把它的高度增加
如果元素是显示的，现将高度减为0，再隐藏它。

代码：

<!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></title>    <script src="../jquery-3.2.1.min.js"></script>    <style>        #div1{            width: 1000px;            height: 1000px;            background-color: red;        }    </style></head><body>    <div id="div1"></div>    <button id="btnSlideup">上滑</button>    <button id="btnSlideDown">下滑</button>    <button id="btnSlideToggle">切换</button></body><script>    $("#btnSlideup").click(function () {        $("#div1").slideUp(5000/*function () {            alert("上滑了");        }*/);    });    $("#btnSlideDown").click(function () {        $("#div1").slideDown(5000);    });    $("#btnSlideToggle").click(function () {        $("#div1").slideToggle(5000);    })</script></html>

4、动画

$("#btn").click(function () {    //设置多个CSS属性  /*  $("#div1").animate({left:'200px',top:'300'});*/    //设置相关属性    $("#div1").animate({        left:'300px',        width: '+=100px',        height: '+=100px',        opacity: '0.5'    })});

改变预定义值来实现我们所需要的内容的显示或隐藏

$("#div1").animate({  width: 'toggle'})

<body>    <button id="start">开始</button>    <button id="stop">停止</button>    <div style="width: 200px;height: 200px;background-color: blue"></div></body><script>    $("#start").click(function () {        $("div").animate({height:'500px'},"slow")        $("div").animate({width:'500px'},"slow")        $("div").animate({height:'200px'},"slow")        $("div").animate({width:'200px'},"slow")    })    $("#stop").click(function () {       $("div").stop(true);    })</script>

.animate()中有三个参数：
第一个参数是需要改变的样式
第二个参数是显示的速度（slow，fast，毫秒数）
第三个参数是回调函数

5、结束动画
动画在进行的过程中是可以停止的

<body>    <button id="start">开始</button>    <button id="stop">停止</button>    <div style="width: 200px;height: 200px;background-color: blue"></div></body><script>    $("#start").click(function () {        $("div").animate({height:'500px'},"slow")        $("div").animate({width:'500px'},"slow")        $("div").animate({height:'200px'},"slow")        $("div").animate({width:'200px'},"slow")    })    $("#stop").click(function () {       $("div").stop();    })</script>

阅读全文

0 0