jQuery学习笔记（2）效果——显示隐藏、淡入淡出、滑动、动画、停止_点击隐藏按钮,橙色小框消失,速度为slow,完成后弹出我隐藏了; 点击显示按钮,橙色小-CSDN博客

本文链接：https://blog.csdn.net/qq_43266465/article/details/102519837

显示与隐藏

hide(); 隐藏
show(); 显示
hide(speed,callback);
show(speed,callback);
speed是隐藏/显示的速度"slow" “fast” 也可以直接数字毫秒
callback(回调函数)：是上一个动画运行完之后再运行回调函数
toggle();隐藏/显示切换
toggle(speed,callback);
代码总结：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function(){
            //实现隐藏（用回调函数的效果，并且速度1000ms）
            $("#button1").click(function(){
                //1000,callback回调函数
                $("#a").hide(1000,function(){$("#b").hide(1000);});
             //  $("#b").hide(1000);
            });
            //实现显示（没有用回调函数的效果）
            $("#button2").click(function(){
                $("#a").show(1000);
                $("#b").show(1000);
            });
            //实现隐藏\显示切换
            $("#button3").click(function(){
                $("#a").toggle(1000,function(){$("#b").toggle(1000);});
                //toggle，并且用了callback
            });
        });
    </script>
</head>
<body>
    <input type="button" id="button1" value="隐藏" />
    <input type="button" id="button2" value="显示" />
    <input type="button" id="button3" value="隐藏\显示切换" />
    <div id="a" style="width: 100px;height: 100px;background-color: red;"></div>
    <div id="b" style="width: 100px;height: 100px;background-color: blue;"></div>
</body>
</html>

运行上面的代码点隐藏的时候发现红色块消失后蓝色块顶了上去，这是html特性

淡入淡出

fadeIn(); 淡入
fadeOut(); 淡出
fadeToggle();;淡入淡出的切换
fadeTo(speed,opacity,callback);(speed、opacity都要有)按照speed淡入到opacity的程度
代码总结：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function(){
            //淡入
           $("#button1").click(function(){
                $("div").fadeIn(1000);
           });
           //淡出(用了回调函数)
           $("#button2").click(function(){
                $("#a").fadeOut(1000,function(){$("#b").fadeOut(1000);});
           });
           //淡入淡出切换
           $("#button3").click(function(){
                $("div").fadeToggle();
           });
           //渐变到指定透明度
           //（没点之前，用淡入淡出正常）
           //（点之后，淡入淡出都到fadeTo设定的opacity程度）
           //来回点感觉一下
           $("#button4").click(function(){
                $("#a").fadeTo(1000,0.6);
                $("#b").fadeTo(1000,0.3);
           });
        });
    </script>
</head>
<body>
    <input type="button" id="button1" value="淡入" />
    <input type="button" id="button2" value="淡出" />
    <input type="button" id="button3" value="淡入\淡出切换" />
    <input type="button" id="button4" value="fadeTo" />
    <div id="a" style="width: 100px;height: 100px;background-color: red;"></div>
    <div id="b" style="width: 100px;height: 100px;background-color: blue;"></div>
</body>
</html>

滑动

slideDown();向下滑动
slideUp();向上滑动
slideToggle();滑动切换
同样能 (speed,callback)
代码总结：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function(){
            //下滑
           $("#button1").click(function(){
                $("div").slideDown();
           });
           //上滑
           $("#button2").click(function(){
                $("div").slideUp();
           });
           //滑动切换
           $("#button3").click(function(){
                $("div").slideToggle();
           });
    
        });
    </script>
</head>
<body>
    <input type="button" id="button1" value="滑出" />
    <input type="button" id="button2" value="滑入" />
    <input type="button" id="button3" value="滑入\滑出 切换" />
    <div style="width: 100px;height: 100px;background-color: red;">
        我是红色
    </div>
</body>
</html>

动画

animate();创建自定义动画

$(selector).animate({param},speed,callback);
param 定义动画的CSS属性

注意一下：默认情况下，html元素位置都是静态的，无法移动。设置成position:relative\fixed\absolute

$(selector).animate({……},speed,callback);
1.……里可以写一个也可以写多个用，分隔开
		eg:width:'150px'
2.也可以写相对值
		eg:width:' +=150px' // 运行动画width+150px再运行动画再+150px
3.也可……值设为”show“ ”hide“ ”toggle“
		eg:width:'toggle'

要是想实现一个动画之后再实现另一个动画可以写多个animate
（代码总结写在停止里）

停止

stop(stopAll,goToEnd) 停止动画效果
stopAll、goToEnd默认均为false对其理解写在下面代码总结中
代码总结：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function(){
            //一个动画效果
           $("#button1").click(function(){
                $("div").animate({left:'250px'});
           });
           //多个动画效果，一个接一个实现
           $("#button2").click(function(){
                $("div").animate({opacity:'0.5',width:'250px'},1000);
                $("div").animate({opacity:'1.0',height:'300px'},1000);
                $("div").animate({opacity:'0.5',width:'100px'},1000);
                $("div").animate({opacity:'1.0',height:'100px'},1000);
                $("div").animate({fontSize:'50px'});
           });
           //停止，仅停止当前动画，队列中其余动画按顺序继续往下进行
           $("#button3").click(function(){
                $("div").stop();
           });
           //stopAll对应为true，则动画全部停止（清除动画队列）
           $("#button4").click(function(){
                $("div").stop(true);
           });
           //goToEnd对应为true时stopAll要对应为false，直接完成当前动画,进行队列的下一个动画
           $("#button5").click(function(){
                $("div").stop(false,true);
           });
        });
    </script>
</head>
<body>
    <input type="button" id="button1" value="动画" />
    <input type="button" id="button2" value="动画2" />
    <input type="button" id="button3" value="停止" />
    <input type="button" id="button4" value="stopAll停止" />
    <input type="button" id="button5" value="goToEnd停止" />
    <div style="width: 100px;height: 100px;background-color: red;position: absolute;">
    23333
    </div>
</body>
</html>

Chaining(链接)

允许在相同元素上运行多条jQuery命令，写成一个句子
代码总结：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function(){
            $("#button1").click(function(){
                $("div").css("backgroundColor","yellow").hide(1000).show(1000);
            });
            //不同写法
            $("#button2").click(function(){
                $("div").css("backgroundColor","blue")
                        .slideUp(1000)
                        .slideDown(1000);
            });
        });
    </script>
</head>
<body>
    <input type="button" id="button1" value="多个效果" />
    <input type="button" id="button2" value="多个效果2" />
    <div style="width: 100px;height: 100px;background-color: red;position: absolute;">
        233333
    </div>
</body>
</html>