jQuery效果详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44538225/article/details/86543269

JQuery效果
在jQuery中的基础分12种，有语法，选择器，对象，事件等等，当然包括效果，在这里就不一一列举了。我着重挑写一下jQuery效果
在这里插入图片描述

从图片我们可以看到，jQuery中的效果也分为很多。
注：图片来源授课老师授课时发的文件。
那么举个例子看看：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>JQuery效果</title>
</head>
<body>
    <div id="open_up" style="position:relative; left:110px;"> 
        <h2>我出来了</h2>
    </div>
    <div>
        <h2 id="open_up1" style="position:relative; left:110px;">我隐藏了 </h2>
    </div>
    <button id="show" style="width:100px;height:45px;">隐藏</button>
    <button id="show1" style="width:100px;height:45px;">显示</button>
    <button id="show2" style="width:100px;height:45px;">切换</button>
    <br />      
    <br />      
    <button id="show3" style="width:100px;height:45px;">滑动显示</button>
    <button id="show4" style="width:100px;height:45px;">滑动隐藏</button>
    <button id="show5" style="width:100px;height:45px;">滑动切换</button>
    <br />     
    <br />     
    <button id="show6" style="width:100px;height:45px;">淡入</button>
    <button id="show7" style="width:100px;height:45px;">淡出</button>
    <button id="show8" style="width:100px;height:45px;">淡入淡出切换</button>
    <br />
    <br />
    <button id="show9" style="width:310px;height:45px;">调整透明度到 0.2 fadeTo</button>
    <br />      
    <br />      
    <button id="show10" style="width:100px;height:45px;">自定义动画</button>
    <button id="show11" style="width:100px;height:45px;">停止</button>
    <button id="show12" style="width:100px;height:45px;">延缓 delay</button>

    <script src="~/Content/js/jquery-1.12.4/jquery-1.12.4.js"></script>

    <script>
    $(function () {
        $("#show").click(function () {
            //参数
            //速度:(可选)可以是预设的("slow","normal",or"fast")表示动画时长的毫秒数
            //easin换效果，默认是"swing",可用参数"linear"
            //完成   g:(可选)指定切时执行函数(可选)
            $("#open_up").hide(6000, 'linear', function () {
                alert("已经隐藏");
            });
            $("#open_up1").hide(6000, 'linear', function () {
            
            });
        });
        $("#show1").click(function () {
            $("#open_up").show();
            $("#open_up1").show();
        });
        $("#show2").click(function () {
            $("#open_up").toggle();
            $("#open_up1").toggle();
        });
        //滑动
        $("#show3").click(function () {
            $("#open_up").slideDown();
            $("#open_up1").slideDown();
        });
        $("#show4").click(function () {
            $("#open_up").slideUp();
            $("#open_up1").slideUp();
        });
        $("#show5").click(function () {
            $("#open_up").slideToggle();
            $("#open_up1").slideToggle();
        });
        //淡入淡出
        $("#show6").click(function () {
            //只指定速度
            //$("#open_up").fadeIn(2000）;
            //指定速度和完成时执行函数
            $("#open_up").fadeIn(2000, function () {
                console.log("执行完成");
            });
            $("#open_up1").fadeIn(2000, function () {
               
            });
        });
        $("#show7").click(function () {
            $("#open_up").fadeOut(2000);
            $("#open_up1").fadeOut(2000);
        });
        $("#show8").click(function () {
            $("#open_up").fadeToggle(2000);
            $("#open_up1").fadeToggle(2000);
        });
        //fadeTo
        $("#show9").click(function () {
            //参数:速度(可选)，目标透明度，easing(可选)，完成时执行函数(可选)
            $("#open_up").fadeTo(3000, 0.2, function () {
                console.log("执行完成");
            });
            $("#open_up1").fadeTo(3000, 0.2, function () {
                console.log("执行完成");
            });
        });
        //animate()
        $("#show10").click(function () {
            $("#open_up").animate({
                "fontSize": "50px",
                "left": "+50px",
                "top": "+50px",
            }, 100, function () {
                alert("动画执行完");
            });
            $("#open_up1").animate({
                "fontSize": "50px",
                "left": "+50px",
                "top": "+50px",
            }, 100, function () {
                alert("动画执行完");
            });
        });
        $("#show11").click(function () {
            $("#open_up").stop();
            $("#open_up1").stop();
        });
        //delay  设置一个延时来推迟执行队列中之后的项目
        $("#show12").click(function () {
            $("#open_up").delay(1000).fadeOut(1000);
            $("#open_up1").delay(1000).fadeOut(1000);
        });
    });
    </script>
</body>
</html>

它实现的效果在这里我只列举一个，剩下的可以自己复制一下看看。如图，鼠标按了淡入淡出切换的按钮：
在这里插入图片描述
执行到这里的时候我移动鼠标按了停止的按钮，

再一次点击停止按钮之后继续执行完这次任务，然后两个div就隐藏了起来