JQuery 效果之隐藏与显示、淡入淡出、滑动、回调

最新推荐文章于 2021-07-30 17:57:18 发布

原创最新推荐文章于 2021-07-30 17:57:18 发布 · 911 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #效果

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了HTML、CSS、JavaScript中用于实现网页动态效果的动画方法，包括隐藏、显示、淡入淡出、滑动以及回调机制的应用。通过实例展示了如何使用这些方法来创建丰富的交互体验，并提供了具体的代码实现。

1、隐藏
hide();
show();
toggle();

2、淡入淡出
slideDown();
slideUp();
slideToggle();

3、回调（当动画完成后调用）

代码如下：

HTML 部分：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>隐藏与显示、淡入淡出、滑动、回调</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="xiaoguo.js"></script>
    <style type="text/css">
        div{
            background-color: bisque;
            width: 50px;
            height: 50px;
            float: left;
            margin: 2px;
        }

        #d4,#d5,#d6,#d7{
            width: 100%;
            height: 15px;
            padding: 5px;
            background-color: bisque;
            text-align: center;
            margin:1px;
        }

        #d5{
            padding: 50px;
            display: none;
            background-color: aliceblue;
        }
    </style>
</head>
<body>

<p id="p1">把我隐藏起来</p>
<button id="b1">隐藏</button>
<button id="b2">显示</button>
<button id="b3">隐藏/显示</button>

<br/>
<br/>

<script>
    for(var i=0;i<5;i++) {
        $("<div>").appendTo(document.body);
    }
        $("div").click(function(){
            $(this).hide(1000,function(){  //隐藏并没有删除  所以可以定义函数删除
                $("this").remove();
            });
        });

</script>


<button id="b4">fadeIn</button>
<button id="b5">fadeOut</button>
<button id="b6">fadeToggle</button>
<button id="b7">fadeTo</button>

<br/>
<div id="d1" style="width: 80px;height: 80px;background-color: blanchedalmond;display: none"></div>
<div id="d2" style="width: 80px;height: 80px;background-color: coral;display: none"></div>
<div id="d3" style="width: 80px;height: 80px;background-color: crimson;display: none"></div>

<br/>


<div id="d4">出现</div>
<div id="d6">隐藏</div>
<div id="d7">隐藏&出现</div>
<div id="d5">滑动出来的内容部分</div>



<button id="b8">隐藏回调</button>
<p id="p2">回调测试</p>

</body>
</html>

Javascript部分

/**
 * Created by qing on 2015/8/20.
 */



$(document).ready(function(){
    //隐藏  并未移除
    $("#b1").click(function () {
        $("#p1").hide(1000); //参数:所需时间 1000毫秒即1秒
    });

    //显示
    $("#b2").click(function () {
        $("#p1").show(1000); //参数:所需时间 毫秒
    });

    //隐藏&显示
    $("#b3").click(function () {
        $("#p1").toggle(1000); //参数:所需时间 毫秒
    });

    //淡入
    $("#b4").on("click",function(){
        $("#d1").fadeIn(1000),
        $("#d2").fadeIn(1000),
        $("#d3").fadeIn(1000)
    });

    //淡出
    $("#b5").on("click",function(){
        $("#d1").fadeOut(1000),
            $("#d2").fadeOut(1000),
            $("#d3").fadeOut(1000)
    });

    //淡入&淡出
    $("#b6").on("click",function(){
        $("#d1").fadeToggle(1000),
            $("#d2").fadeToggle(1000),
            $("#d3").fadeToggle(1000)
    });

    //透明度变化
    $("#b7").on("click",function(){
            $("#d1").fadeTo(1000 ,0.8),
            $("#d2").fadeTo(1000,0.5),
            $("#d3").fadeTo(1000,0.1)
    });

    //滑动出现
    $("#d4").click(function(){
        $("#d5").slideDown(1000);
    });

   //滑动隐藏
    $("#d6").click(function(){
        $("#d5").slideUp(1000);
    });

    //滑动隐藏&出现

    $("#d7").click(function(){
        $("#d5").slideToggle(1000);
    });


    //回调，

    $("#b8").click(function(){
        //$("#p2").hide(1000, function () {
            //alert("动画完成，执行了回调函数")；
        //});

        //执行多个动画
            $("#p2").css("color","red").slideUp(1000).slideDown(1000);

    });

});