jquery隐藏div_jQuery动画效果

最新推荐文章于 2023-09-14 18:51:30 发布

weixin_39658726

最新推荐文章于 2023-09-14 18:51:30 发布

阅读量229

点赞数

文章标签： jquery隐藏div

-------------------------------------------------------------------------------------------------------

1. 隐藏和显示

show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。

1.1 hide() 和 show()

我们可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

<body>
    <div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div>
    <button class="show">显示</button>
    <button class="hide">隐藏</button>
    <script>
        // 显示元素
        $(".show").click(function () {
            $("div").show();
        });
        // 隐藏元素
        $(".hide").click(function () {
            $("div").hide();
        });
    </script>
</body>

hide() 和 show() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数。

| 参数 | 描述 | | :---: | :---: | | speed | 【可选】规定隐藏/显示的速度，时间单位为毫秒。 | | callback | 【可选】规定隐藏或显示完成后所执行的函数名称。 |

下面的例子演示了带有 speed 参数的 hide() 方法：

<body>
    <div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div>
    <button class="show">显示效果</button>
    <button class="hide">隐藏效果</button>
    <script>
        // 动画显示元素
        $(".show").click(function () {
            $("div").show(1000, function () {
                console.log("div动画显示完成");
            });
        });
        // 动画隐藏元素
        $(".hide").click(function () {
            $("div").hide(1000, function () {
                console.log("div动画隐藏完成");
            });
        });
    </script>
</body>

1.2 toggle()方法

我们可以使用 toggle() 方法来切换 hide() 和 show() 方法。

toggle() 可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。

<body>
    <div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div>
    <button class="toggle">显示隐藏切换效果</button>
    <script>
        // 切换显示或隐藏元素
        $(".toggle").click(function () {
            $("div").toggle(1000, function () {
                console.log("切换完毕");
            });
        });
    </script>
</body>

2.淡入和淡出

fadeIn()方法和fadeOut()方法与show方法不相同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display: none")。fadeIn()方法则恰好相反。

2.1 fadeIn()和fadeOut()

fadeIn() 用于淡入已隐藏的元素，fadeOut() 方法用于淡出可见元素。

fadeIn() 和 fadeOut() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。

<body>
    <div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div>
    <button class="fade-in">淡入效果</button>
    <button class="fade-out">淡出效果</button>
    <script>
        $(".fade-in").click(function () {
            $("div").fadeIn(1000, function () {
                console.log("淡入动画完成");
            });
        });
        $(".fade-out").click(function () {
            $("div").fadeOut(1000, function () {
                console.log("淡出动画完成")
            });
        })
    </script>
</body>

2.2 fadeToggle() 方法

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果；如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

fadeToggle() 可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。

<body>
    <div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div>
    <button class="toggle">淡入淡出切换效果</button>
    <script>
        $(".toggle").click(function () {
            $("div").fadeToggle(1000, function () {
                console.log("淡入淡出切换动画完成");
            });
        });
    </script>
</body>

2.3 fadeTo() 方法

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间），语法：$(selector).fadeTo(speed, opacity, callback);。

fadeTo() 方法中opacity 参数【必须】将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

下面的例子演示了带有不同参数的 fadeTo() 方法：

<body> 
    <div style="width: 200px; height: 200px; background-color: yellow; opacity:0;"></div>
    <button class="fade-to">给定的不透明度</button>
    <script>
        $(".fade-to").click(function () {
            $("div").fadeTo(500, 0.25, function () {
                console.log("透明度达到0.25");
            });
            $("div").fadeTo(1000, 0.5, function () {
                console.log("透明度达到0.5");
            });
            $("div").fadeTo(1000, 0.75, function () {
                console.log("透明度达到0.75");
            });
            $("div").fadeTo(500, 1.0, function () {
                console.log("透明度达到1.0");
            });
        });
    </script>
</body>

3. 展开和收起

slideDown()方法和slideUp()方法只改变元素的高度，slideUp()方法会在指定的一段时间内降低元素的高度，直到元素完全消失("display: none")。slideDown()方法则恰好相反。

3.1 slideDown()和slideUp()

slideDown() 方法用于向下滑动元素，slideUp() 方法用于向上滑动元素。

slideDown() 和 slideUp() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。

<body>
    <div style="width: 200px; height: 200px; background-color: yellow;"></div>
    <button class="slideUp">向上滑动</button>
    <button class="slideDown">向下滑动</button>
    <script>
        $(".slideUp").click(function () {
            $("div").slideUp(1000, function () {
                console.log("向上滑动完成");
            });
        });
        $(".slideDown").click(function () {
            $("div").slideDown(1000, function () {
                console.log("向下滑动完成");
            });
        });
    </script>
</body>

3.2 slideToggle() 方法

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们；如果元素向上滑动，则 slideToggle() 可向下滑动它们。

slideToggle() 可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。

<body>
    <div style="width: 200px; height: 200px; background-color: yellow"></div>
    <button class="toggle">向上向下滑动切换</button>
    <script>
        $(".toggle").click(function () {
            $("div").slideToggle(1000, function () {
                console.log("切换完成");
            });
        });
    </script>
</body>

4. 自定义动画

前面已经讲了多种类型的动画，如果这些动画还无法满足用户的需求，那么就需要对动画有更多的控制，需要采取一些高级的自定义动画来解决这些问题。在jQuery中，我们可以使用animate()方法来自定义动画。

4.1 animate() 方法

animate() 方法用于创建自定义动画的函数。

语法：$(selector).animate({params}, speed, easing, callback);

linear：匀速 swing：先慢中间快后慢

自定义动画实例：

<body>
    <div style="width: 200px; height: 200px; opacity: 0.2; background-color: gold; position: relative;"></div>
    <button class="animate">自定义动画</button>
    <script>
        $(".animate").click(function () {
            $("div").animation({
                // 注意: margin-top也可写成驼峰式marginTop
                "margin-top": "100px",
                "opacity": "1.0",
                "width": "300px",
                "height": "300px",
                // 注意：如果进行位置操作，则需要设置元素定位属性值：relative、fixed或absolute
                "left": "100px"
            }, 3000, function () {
                console.log("自定义动画结束");
            });
        });
    </script>
</body>

4.2 animate() 使用队列功能

jQuery 提供针对动画的队列功能，我们可以编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

<body>
    <div class="wrap" style="width: 200px; height: 200px; background-color: gold;"></div>
    <button class="animate">使用队列功能</button>
    <script>
        $(".animate").click(function () {
            // 盒子移动到右上角
            $("#box").animate({
                 "top" : "10px",
                 "left" : "450px"
            }, 1000);
            // 盒子移动到右下角
            $("#box").animate({
                 "top" : "450px",
                 "left" : "450px"
            }, 1000);
            // 盒子移动到左下角
            $("#box").animate({
                 "top" : "450px",
                 "left" : "10px"
            }, 1000);
            // 盒子移动到左上角
            $("#box").animate({
                 "top" : "10px",
                 "left" : "10px"
            }, 1000);
        });
    </script>
</body>

4.3 jQuery插件

jQuery动画中并不支持色彩动画（例如背景颜色，字体颜色），如果想要生成颜色动画，那么我们可以使用 jquery.color.js 插件来帮我们实现。

<body>
    <div style="width: 200px; height: 200px; background-color: gold; position: relative;">我是一个DIV</div>
    <button class="animate">自定义动画</button>
    <script>
        $(".animate").click(function () {
            $("div").animate({
                "margin-top": "100px",
                "width": "300px",
                "height": "300px",
                "color": "red",
                "background-color" : "blue",
                "left": "100px"
            }, 3000);
        });
    </script>
</body>

5. 停止动画

很多时候需要停止匹配元素正在进行的动画，那么我们可以使用stop()方法来停止动画。

语法：$(selector).stop(stopAll, goToEnd);

| 参数 | 描述 | | :---: | :---: | | stopAll | 【可选】是否清空当前的队列。默认值为false, 当值为true时, 表示立即清空当前的队列，后面的动画都不执行了。 | | goToEnd | 【可选】是否立即执行完当前动画。默认值为false, 当值为true时，表示立即执行完当前动画，然后再执行别的动画。 |

停止动画示例：

<body>
    <div style="width: 100px;height: 100px;background-color:red;position: relative;"></div>
    <button id="btn" style="float: right;">停止动画</button>
    <script>
        $("div").click(function () {
            $(this).animate({"left": "+=300px"}, 3000);
            $(this).animate({"top": "+=300px"}, 3000);
            $(this).animate({"left": "-=300px"}, 3000);
            $(this).animate({"top": "-=300px"}, 3000);
        });
        $("#btn").click(function () {
            // 表示立即停止全部动画，原地停止
            $("div").stop(true, false);
        });
    </script>
</body>

weixin_39658726

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery隐藏div_jQuery动画效果

-------------------------------------------------------------------------------------------------------1. 隐藏和显示show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。1.1 hi...
复制链接

扫一扫