特效

jQuery提供一些特效方法来增强web页面人体验。

支持基本特效、淡入淡出特效、滑动特效、自定义特效。

基本特效

方法	说明
show()	显示选中的元素
hide()	隐藏选中的元素
toggle()	在选中元素上切换显示和隐藏的状态

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本特效</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
        </script>        
        </head>
        <body> 
            <div id="one">点击我隐藏</div>
            <div id="two">点击我显示上面的</div>
            <div id="three">点击我控制第二个</div>
        <script>
            $(function () {
                $("#one").on("click",function(){
                    $("#one").hide();
                });
                $("#two").on("click",function(){
                    $("#one").show();
                });
                $("#three").on("click",function(){
                    $("#two").toggle();
                });
            });
        </script>
    </body>
</html>

淡入淡出特效

方法	说明
fadeIn()	淡入选中元素使其变得不透明
fadeOut()	淡出选中元素使其变得透明
fadeTo()	修改选中元素的透明度
fadeToggle()	使用透明度来隐藏或显示选中的元素（切换其当前的状态）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
    <ul id="ul">
        <li id="a">鼠标</li>
        <li id="b">键盘</li>
        <li id="c">屏幕</li>
        <li id="d"><a>主机</a></li>
    </ul>
</div>
<script>
    $(function () {
        var $li=$("li");
        //淡入
        $li.hide().each(function (index) {
            $(this).delay(650*index).fadeIn(700);
        });
        //淡出
        $li.on('click',function () {
            $(this).fadeOut(700);
        });
    })
</script>
</body>
</html>

自定义特效

方法	说明
delay()	延迟队列中操作的执行
stop()	停止一个正在运行的动画
animate()	创建自定义动画