JQuery效果

Posted 2020-09-11 enternallove

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery效果相关的知识，希望对你有一定的参考价值。

一下代码均未做浏览器兼容，可能部分浏览器不适用，建议使用谷歌浏览器

一.隐藏与显示

1.简单的隐藏效果

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("p").click(function(){
            $(this).hide();
        });
    });
    </script>
</head>
<body>
<p>点击消失1</p>
<p>点击消失2</p>
</body>
</html>

2.另一种隐藏效果

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".father .son").click(function(){
            $(this).parents(".father").hide("fast");
        });
    });
    </script>
    <style type="text/css">
        div.father{
            background-color: yellow;
            padding: 7px;
            border: solid 2px red;
        }
    </style>
</head>
<body>
<div class="father">
    <p>这是一句话</p>
    <button class="son">点击消失</button>
</div>
</body>
</html>

3.将显示和隐藏效果结合在一起

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".hide").click(function(){
            $("p").hide("slow");
        });
        $(".show").click(function(){
            $("p").show("swing");         
        });
    });
    </script>

</head>
<body>
<p>这是一句话</p>
<button class="hide">点击隐藏</button>
<button class="show">点击出现</button>
</body>
</html>

4.语法

$(selector).show(speed,easing,callback)

根据JQuery的参考手册，上面的参数依次是速度（slow，fast，具体的秒数（毫秒为单位）），动画方式（swing（前后慢，开头块），linear（匀速）），回调函数。

5.使用toggle（）实现简洁的出现隐藏效果

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".hs").click(function(){
            $("p").toggle("slow");            //转换器
        });

    });
    </script>

</head>
<body>
<p>这是一句话</p>
<button class="hs">点击隐藏or出现</button>

</body>
</html>

二.淡入与淡出

1.fadeIn（）淡入

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("hs").click(function(){
                $("#div1").fadeIn("slow");
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn("slow");
            });
            });
    
    </script>

</head>
<body>
<button class="hs">点击淡入方框</button>
<div id="div1" style="width: 50px;height: 50px;display: none;background-color: red"></div>
<div id="div2" style="width: 50px;height: 50px;display: none;background-color: blue"></div>
<div id="div3" style="width: 50px;height: 50px;display: none;background-color: yellow"></div>


</body>
</html>

2.fadeOut实现淡出

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("hs").click(function(){
                $("#div1").fadeOut("slow");
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut("slow");
            });
            });
    
    </script>

</head>
<body>
<button class="hs">点击淡入方框</button>
<div id="div1" style="width: 50px;height: 50px;display: none;background-color: red"></div>
<div id="div2" style="width: 50px;height: 50px;display: none;background-color: blue"></div>
<div id="div3" style="width: 50px;height: 50px;display: none;background-color: yellow"></div>


</body>
</html>

3.fadeToggle()实现淡入淡出

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("hs").click(function(){
                $("#div1").fadeToggle("slow");
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle("slow");
            });
            });
    
    </script>

</head>
<body>
<button class="hs">点击淡入方框</button>
<div id="div1" style="width: 50px;height: 50px;display: none;background-color: red"></div>
<div id="div2" style="width: 50px;height: 50px;display: none;background-color: blue"></div>
<div id="div3" style="width: 50px;height: 50px;display: none;background-color: yellow"></div>


</body>
</html>

4.fadeTo（）实现颜色的改变

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("hs").click(function(){
                $("#div1").fadeTo("slow" 0.5);                          //需要设置speed和opacity（0-1）
                $("#div2").fadeTo("slow" 0.5);
                $("#div3").fadeTo("slow" 0.5);
            });
            });
    
    </script>

</head>
<body>
<button class="hs">点击淡入方框</button>
<div id="div1" style="width: 50px;height: 50px;background-color: red"></div>
<div id="div2" style="width: 50px;height: 50px;background-color: blue"></div>
<div id="div3" style="width: 50px;height: 50px;background-color: yellow"></div>


</body>
</html>

3.滑动

1.使用slideDown（）实现下滑

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#d1").click(function(){
            $("#d2").slideDown("slow");
        });
    });

    
    </script>
    <style type="text/css">
        #d1,#d2{
            padding: 5px;
            background-color: red;
            text-align: center;
            border: solid 1px yellow;
        }

        #d2{
            padding: 10px;
            background-color: blue;
            display: none;
        }
    </style>

</head>
<body>
<div id="d1">点击下滑</div>
<div id="d2">下滑出来的界面</div>
</body>
</html>

2.使用slideUp（）实现上滑

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#d1").click(function(){
            $("#d2").slideDown("slow");
        });
        $("#d2").click(function(){
            $("#d2").slideUp("slow");
        });
    
    });


    
    </script>
    <style type="text/css">
        #d1,#d2{
            padding: 5px;
            background-color: red;
            text-align: center;
            border: solid 1px yellow;
        }

        #d2{
            padding: 10px;
            background-color: blue;
            display: none;
        }
    </style>

</head>
<body>
<div id="d1">点击下滑</div>
<div id="d2">点击上滑</div>
</body>
</html>

3.使用slideToggle（）实现上下滑动转换

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#d1").click(function(){
            $("#d2").slideToggle("slow");
        });

    
    });


    
    </script>
    <style type="text/css">
        #d1,#d2{
            padding: 5px;
            background-color: red;
            text-align: center;
            border: solid 1px yellow;
        }

        #d2{
            padding: 10px;
            background-color: blue;
            display: none;
        }
    </style>

</head>
<body>
<div id="d1">点击下滑</div>
<div id="d2">点击上滑</div>
</body>
</html>

4.动画

1.语法

$(selector).animate({params},speed,callback);

参数分别是形成动画的css的参数值（必须），速度（可选），回调函数（可选）

2.一个简单的实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".animate").click(function(){
            $(".animate").animate({left:‘250px‘});
        });
    });


    
    </script>
    <style type="text/css">
    .animate{
        border: solid 4px red;
        background-color: yellow;
        text-align: center;
        position: absolute;               //需要设置为relative fixed或者absolute
    }
    </style>

</head>
<body>
<div class="animate" >
    点击发生变化，右移250px
</div>
</body>
</html>

3.稍微复杂的动画

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".animate").click(function(){
            $(".animate").animate({
                left:‘250px‘,                    //多个属性值发生改变
                opacity:‘0.5‘,
                width:‘100px‘,
                height:‘100px‘
                          
        });
        });
    });


    
    </script>
    <style type="text/css">
    .animate{
        border: solid 4px red;
        background-color: yellow;
        text-align: center;
        position: absolute;               //需要设置为relative fixed或者absolute
    }
    </style>

</head>
<body>
<div class="animate" >
    点击发生复杂变化
</div>
</body>
</html>

4.注意点

几乎可以使用所有的css属性不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jquery.com 下载 Color Animations 插件。

5.相对值动画（与当前值不同而产生的动画效果）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".animate").click(function(){
            $(".animate").animate({
                left:‘+=250px‘,                  //不断向右移
            
                          
        });
        });
    });


    
    </script>
    <style type="text/css">
    .animate{
        border: solid 4px red;
        background-color: yellow;
        text-align: center;
        position: absolute;               //需要设置为relative fixed或者absolute
    }
    </style>

</head>
<body>
<div class="animate" >
    点击发生复杂变化
</div>
</body>
</html>

6.使用预定义值（toggle，hide，show）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".animate").click(function(){
            $(".animate").animate({
                right:‘hide‘
            
                          
        });
        });
    });


    
    </script>
    <style type="text/css">
    .animate{
        border: solid 4px red;
        background-color: yellow;
        text-align: center;
        position: absolute;               //需要设置为relative fixed或者absolute
    }
    </style>

</head>
<body>
<div class="animate" >
    点击发生复杂变化
</div>
</body>
</html>

7.动画队列

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".animate").click(function(){
            var div = $(".animate");
            div.animate({left:‘250px‘});                 //按照一定的顺序完成动画
            div.animate({opacity:‘0.5‘});
        });
    });


    
    </script>
    <style type="text/css">
    .animate{
        border: solid 4px red;
        background-color: yellow;
        text-align: center;
        position: absolute;               //需要设置为relative fixed或者absolute
    }
    </style>

</head>
<body>
<div class="animate" >
    点击发生复杂变化
</div>
</body>
</html>

5.停止动画

1.不带参数的stop（）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
 
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

2.带参数的stop（）方法

$(selector).stop(stopAll,goToEnd);

参数表示：stopAll（停止正在进行的动画，如果有排队的动画，可以执行），goToEnd（结束所有动画，并呈现完成动画静态状态）

6.callback函数

1.注意

在动画全部完成之后执行

2.实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".animate").hide("slow",function(){
            alert("已经被隐藏了！");                     //一个回调函数
        });
    });
    </script>


</head>
<body>
<div class="animate" >
    隐藏之后弹出提示框
</div>
</body>
</html>

7.Chaining

1.作用

链接动作和方法

2.实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    $(function(){
        $(".animate").hide("slow").show("slow");
    });
    </script>


</head>
<body>
<div class="animate" >
    隐藏之后弹出提示框
</div>
</body>
</html>

以上是关于JQuery效果的主要内容，如果未能解决你的问题，请参考以下文章

几个非常实用的JQuery代码片段

几条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

jQuery 将 div 切片成动画片段

jQuery应用代码片段