jQuery学习二-简单动画-淡入淡出

来源：互联网发布：java spring rpc 实现编辑：程序博客网时间：2024/05/21 01:30

这里总结一下jQuery有淡入淡出的动画的郊果，fadeIn(duration) 动画显示,fadeOut(duration)动画隐藏，fadeToggle(duration)动画显示和隐藏，fadeTo(duration,透明度(0-1))。

下面是代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title>    <script src="jquery-3.2.1.min.js"></script>    <script src="test.js"></script></head><body>    <button id="btnfadeIn" >fadeIn</button>    <button id="btnfadeOut">fadeOut</button>    <button id="btnfadeTo">fadeTo</button>    <button id="btnfadeToggle">fadeToggle</button>     <!--设置display让要显示的内容先隐藏。-->    <div id="div1" style="width: 80px;height: 80px;display:none;background: blue"></div>    <div id="div2" style="width: 80px;height: 80px;display:none;background: red"></div>    <div id="div3" style="width: 80px;height: 80px;display:none;background: green"></div></body></html>

test.js的代码

$(document).ready(function () {    $("#btnfadeIn").on("click",function () {        $("#div1").fadeIn(1000);        $("#div2").fadeIn(1000);        $("#div3").fadeIn(1000);    });    $("#btnfadeOut").on("click",function () {        $("#div1").fadeOut(1000);        $("#div2").fadeOut(1000);        $("#div3").fadeOut(1000);    })    $("#btnfadeToggle").on("click",function () {        $("#div1").fadeToggle(1000);        $("#div2").fadeToggle(1000);        $("#div3").fadeToggle(1000);    })    $("#btnfadeTo").on("click",function () {        $("#div1").fadeTo(1000,0.5);        $("#div2").fadeTo(1000,0.7);        $("#div3").fadeTo(1000,0.6);    })});

阅读全文

0 0