码迷，mamicode.com
首页 > Web开发 > 详细

JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

时间：2016-09-19 01:05:57      阅读：306      评论：0      收藏：0      [点我收藏+]

标签：

JQuery：效果
JQuery效果有很多，包括隐藏、显示、切换，滑动，淡入淡出，以及动画等。
隐藏：JQuery hide()

显示：JQuery show()

切换：JQuery toggle(）

淡入淡出：JQuery fadeIn()、JQuery fadeOut()、JQuery fadeToggle()、JQuery fadeTo()

滑动：JQuery slideDown()、JQuery slideUP()、JQuery slideToggle()

动画：JQuery animation()

范例1：给出两个按钮，点击"显示",通过hide()方法，p标签隐藏；点击"隐藏",通过show()方法,p标签显示。
$("#hide").click(function(){
　　$("p").hide();
});
$("#show").click(function(){
　　$("p").show();
});
代码：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //隐藏
            $("#hide").click(function(){
                $("#p1").hide();
            });
            
            //显示
            $("#show").click(function(){
                $("#p1").show();
            });
        });
    </script>
</head>
<body>
    <div>
        <p id="p1">JQuery框架的使用</p>
    </div>
    <div>
        <button id="hide">隐藏</button>
        <button id="show">显示</button>
    </div>
</body>
</html>
View Code

其实，上面的hide和show方法中还可以添加参数，用来规定隐藏/显示的速度，以及执行结束后的操作
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

代码：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //隐藏
            $("#hide").click(function(){
                $("#p1").hide(1000,function(){  //1秒的时间p隐藏，隐藏后弹出信息
                    alert("好了，p被隐藏了");
                });
            });
            
            //显示
            $("#show").click(function(){
                $("#p1").show(1000,function(){ //1秒的时间p显示，显示后弹出信息
                    alert("好了，p被显示了");
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <p id="p1">JQuery框架的使用</p>
    </div>
    <div>
        <button id="hide">隐藏</button>
        <button id="show">显示</button>
    </div>
</body>
</html>
View Code

范例2：通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
　　$("p").toggle();
});
其实，上面的toggle()方法中还可以添加参数，$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //隐藏或者显示（切换）
            $("#hide_show").click(function(){
                $("#p1").toggle(1000);
            });
        });
    </script>
</head>
<body>
    <div>
        <p id="p1">JQuery框架的使用</p>
    </div>
    <div>
        <button id="hide_show">隐藏/显示</button>
    </div>
</body>
</html>
View Code

范例3：通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：fadeIn()、fadeOut()、fadeToggle()、fadeTo()
·3-1：
jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：

$("button").click(function(){
　　$("#div1").fadeIn();
　　$("#div2").fadeIn("slow");
　　$("#div3").fadeIn(1000);
　　$("#div4").fadeIn(1000，function(){ ...});
});

代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //div淡入
            $("button").click(function(){
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(1000);
                $("#div4").fadeIn(1000,function(){
                    $(this).css("background-color","black");
                });
            });
        });
    </script>
</head>
<body>
    <div><button>点击后,div会淡入</button></div>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red"></div>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green"></div>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:purple"></div>
    <div id="div4" style="width:80px;height:80px;display:none;background-color:blue"></div>
</body>
</html>
View Code

·3-2：
jQuery fadeOut() 方法用于淡出可见元素。
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
$("button").click(function(){
　　$("#div1").fadeOut();
　　$("#div2").fadeOut("slow");
　　$("#div3").fadeOut(1000);
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //div淡出
            $("button").click(function(){
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(1000);
            });
        });
    </script>
</head>
<body>
    <div><button>点击后,div会淡出</button></div>
    <div id="div1" style="width:80px;height:80px;background-color:red"></div>
    <div id="div2" style="width:80px;height:80px;background-color:green"></div>
    <div id="div3" style="width:80px;height:80px;background-color:purple"></div>
</body>
</html>
View Code

·3-3：
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：
$("button").click(function(){
　　$("#div1").fadeToggle();
　　$("#div2").fadeToggle("slow");
　　$("#div3").fadeToggle(3000);
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //div淡入或者淡出（切换）
            $("button").click(function(){
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(1000);
            });
        });
    </script>
</head>
<body>
    <div><button>点击后,div淡入/淡出</button></div>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red"></div>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green"></div>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:purple"></div>
</body>
</html>
View Code

·3-4：
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：
$("button").click(function(){
　　$("#div1").fadeTo("slow",0.15);
　　$("#div2").fadeTo("slow",0.4);
　　$("#div3").fadeTo("slow",0.7);
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //div淡入（给出透明度的渐变），淡出时同理
            $("button").click(function(){
                $("#div1").fadeTo("slow",0.15);
                $("#div2").fadeTo("slow",0.4);
                $("#div3").fadeTo("slow",0.7);
            });
        });
    </script>
</head>
<body>
    <div><button>点击后,div淡入时透明度渐变</button></div>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red"></div>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green"></div>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:purple"></div>
</body>
</html>
View Code

范例4：通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：slideDown()、slideUp()、slideToggle()
·4-1：
jQuery slideDown() 方法用于向下滑动元素。
语法:$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：
$("#flip").click(function(){
　　$("#panel").slideDown();
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //滑下面板
            $("#flip").click(function(){
                $("#panel").slideDown("slow");
            });
        });
    </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>
    <div id="flip">点击后,滑下面板</div>
    <div id="panel">Hello World！</div>
</body>
</html>
View Code

·4-2：
jQuery slideUp() 方法用于向上滑动元素。
语法:$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：
$("#flip").click(function(){
　　$("#panel").slideUp();
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //收起面板
            $("#flip").click(function(){
                $("#panel").slideUp("slow");
            });
        });
    </script>
    <style type="text/css">
        #panel,#flip{
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel{
            padding:50px;
        }
    </style>
</head>
<body>
    <div id="flip">点击后,收起面板</div>
    <div id="panel">Hello World！</div>
</body>
</html>
View Code

·4-3：
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：
$("#flip").click(function(){
　　$("#panel").slideToggle();
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //收起面板
            $("#flip").click(function(){
                $("#panel").slideToggle("slow");
            });
        });
    </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>
    <div id="flip">点击后,滑出或者收起面板</div>
    <div id="panel">Hello World！</div>
</body>
</html>
View Code

范例5：jQuery 动画 - animate() 方法
·5-1：
jQuery animate() 方法用于创建自定义动画。
语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：
实例
$("button").click(function(){
　　$("div").animate({left:‘250px‘});
});

提示：默认情况下，所有的HTML都是静态定位，且无法移动。如果要进行位置操作，要将CSS的position属性设置为relative、fixed或者absolute。

代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //div右移250px
            $("button").click(function(){
                $("div").animate({left:‘250px‘});
            });
        });
    </script>
</head>
<body>
    <button>点击后div右移250像素</button><br>
    <div style="width:80px;height:80px;background-color:blue;position:absolute"></div>
</body>
</html>
View Code

·5-2：
请注意，生成动画的过程中可同时使用多个属性：
$("button").click(function(){
　　$("div").animate({
　　　　left:‘250px‘,
　　　　opacity:‘0.5‘,
　　　　height:‘150px‘,
　　　　width:‘150px‘
　　});
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //动画时操作多个属性
            $("button").click(function(){
                  $("div").animate({
                      left:‘250px‘,
                      opacity:‘0.5‘,
                      height:‘150px‘,
                      width:‘150px‘
                });
            });
        });
    </script>
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
View Code

注意：

可以用 animate() 方法来操作所有 CSS 属性吗？

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

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

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

·5-3：

jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
　　$("div").animate({
　　　　left:‘250px‘,
　　　　height:‘+=150px‘,
　　　　width:‘+=150px‘
　　});
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //动画时使用相对值
            $("button").click(function(){
                 $("div").animate({
                    left:‘250px‘,
                    height:‘+=150px‘,
                    width:‘+=150px‘
              });
            });
        });
    </script>
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
View Code

·5.4：
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
　　$("div").animate({
　　　　height:‘toggle‘
　　});
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //动画时使用相对值
            $("button").click(function(){
                  $("div").animate({
                    height:‘toggle‘
                  });
            });
        });
    </script>
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
View Code

·5-5：
jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
　　var div=$("div");
　　div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
　　div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");
　　div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");
　　div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //动画时使用相对值
            $("button").click(function(){
                var div=$("div");
                div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
                div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");
                div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");
                div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");
            });
        });
    </script>
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
View Code

下面的例子把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：
$("button").click(function(){
　　var div=$("div");
　　div.animate({left:‘100px‘},"slow");
　　div.animate({fontSize:‘3em‘},"slow");
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {

            //动画时使用相对值
            $("button").click(function(){
                var div=$("div");
                div.animate({left:‘100px‘},"slow");
                div.animate({fontSize:‘3em‘},"slow");
            });
        });
    </script>
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">HELLO</div>
</body>
</html>
View Code

 

范例6：jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
jQuery stop() 滑动
jQuery stop() 动画(带参数)
·6-1：
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：
$("#stop").click(function(){
　　$("#panel").stop();
});
代码如下：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>
    <script src="jquery-3.1.0.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>
View Code

 

 

 



 

JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

标签：

原文地址：http://www.cnblogs.com/XYQ-208910/p/5883621.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！