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

最新推荐文章于 2024-03-10 18:19:17 发布

Mr丶M

最新推荐文章于 2024-03-10 18:19:17 发布

阅读量175

点赞数

分类专栏：前端文章标签： jquery 动画

本文链接：https://blog.csdn.net/qq_34390576/article/details/78118594

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这里总结一下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);
    })
});

Mr丶M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习二-简单动画-淡入淡出

这里说一下jQuery的隐藏与显示，淡入淡出，滑动它们分别是jQuery中的.hide() , .slidedown(), .slideUp() , .slideToggle() , .fadeOn();等等括号里一般都是时间，也就是动画的执行时间，下面看一下代码就知道了。这里写代码片
复制链接

扫一扫