jQuery 效果- 隐藏和显示
隐藏、显示、切换,滑动,淡入淡出,以及动画
实例
jQuery hide()
简单的jQuery hide()方法演示。
jQuery hide()
另一个hide()实例。演示如何隐藏文本。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
div.class_div_container {
background-color: rgba(223,236,194,0.5);
border:1px solid #c3c3c3;
padding: 7px;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div class="class_div_container">
<button id="id_btn_hide" class="class_btn class_btn_green" type="button" >点我试试</button>
<p>我们仍未知道那年夏天所见到的花的名字<br/>
あの日見た花の名前を僕達はまだ知らない</p>
</div>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$("#id_btn_hide").click(
// 匿名函数
function() {
// 将父类.hide("slow")
$(this).parents(".class_div_container").hide("slow");
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b><br/>$(".class_btn").parents(".class_div_container").hide("slow");<br/>
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
jQuery hide() 和 show()
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
实例
$("p").hide();
});
$("#id_btn_show").click(function(){
$("p").show();
});
语法:
$( selector).show( speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒值。
可选的 callback 参数是隐藏或显示 完成之后,所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法:
实例
$("p").hide(3000);
});
jQuery toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
div.class_div_container {
background-color: rgba(223,236,194,0.5);
border:1px solid #c3c3c3;
padding: 7px;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div class="class_div_container">
<p>我们仍未知道那年夏天所见到的花的名字<br/>
あの日見た花の名前を僕達はまだ知らない</p>
</div>
<button id="id_btn_toggle" class="class_btn class_btn_green" type="button" >点我试试</button>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$("#id_btn_toggle").click(
// 匿名函数
function() {
// 将div.toggle("slow")
$(".class_div_container").toggle("fast");
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("id_btn").toggle();显示或隐藏
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
实例
$("p").toggle("fast");
});
语法:
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒值。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
可选的 callback 参数,具有以下三点说明:
注意:
- $(selector)选中的元素 的个数 为n个,则callback函数 就会 执行n次
- callback函数名 后 加括号的话, 函数就会立刻执行,而不是等到显示/隐藏完成后才执行
- callback既可以是函数名,也可以是匿名函数
jQuery 效果 - 淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果。
实例
jQuery fadeIn()
演示 jQuery fadeIn() 方法。
jQuery fadeOut()
演示 jQuery fadeOut() 方法。
jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。
jQuery fadeTo()
演示 jQuery fadeTo() 方法。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
div.class_div_container {
background-color: rgba(223,236,194,0.5);
border:1px solid #c3c3c3;
padding: 7px;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button id="id_btn_fadeIn" class="class_btn class_btn_green" type="button" >fadeIn</button>
<button id="id_btn_fadeOut" class="class_btn class_btn_green" type="button" >fadeOut</button>
<button id="id_btn_fadeToggle" class="class_btn class_btn_green" type="button" >fadeToggle</button>
<button id="id_btn_fadeTo" class="class_btn class_btn_green" type="button" >fadeTo</button>
<div id="id_div_1" style="width:80px;height:80px;display:none;background-color:red;">
</div><br/>
<div id="id_div_2" style="width:80px;height:80px;display:none;background-color:green;">
</div><br/>
<div id="id_div_3" style="width:80px;height:80px;display:none;background-color:blue;">
</div><br/>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$("#id_btn_fadeIn").click(
function() {
// 不加参数,默认速度
$("#id_div_1").fadeIn();
// 慢速
$("#id_div_2").fadeIn("slow");
// 自定义慢速
$("#id_div_3").fadeIn(1500);
}
);
// 添加点击事件
$("#id_btn_fadeOut").click(
function() {
// 不加参数,默认速度
$("#id_div_1").fadeOut();
// 慢速
$("#id_div_2").fadeOut("slow");
// 自定义慢速
$("#id_div_3").fadeOut(1500);
}
);
// 添加点击事件
$("#id_btn_fadeToggle").click(
function() {
// 不加参数,默认速度
$("#id_div_1").fadeToggle();
// 慢速
$("#id_div_2").fadeToggle("slow");
// 自定义慢速
$("#id_div_3").fadeToggle(1500);
}
);
// 添加点击事件
$("#id_btn_fadeTo").click(
function() {
// 不加参数,默认速度
$("#id_div_1").fadeTo("slow",0.10);
// 慢速
$("#id_div_2").fadeTo("slow",0.40);
// 自定义慢速
$("#id_div_3").fadeTo("slow",0.7);
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("id_btn").fadeToggle();淡入和淡出
<br/>
fadeIn(),fadeOut(),fadeToggle(),fadeTo();
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
jQuery Fading 方法
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒值。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法:
实例
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出(渐隐) 可见的元素。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒值。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法:
实例
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒值。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法:
实例
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的 不透明度(值介于 0 与 1 之间)。
Opacity: 不透明度,如果为1,则完全不透明!
如果opacity不透明度为0,则表示 完全透明!
语法:
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒值。
fadeTo() 方法中必需的 opacity 参数 将 淡入淡出效果 设置为给定的 不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法:
实例
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jQuery 效果 - 滑动
jQuery 滑动方法可使元素 上下滑动。
实例
jQuery slideDown()
演示 jQuery slideDown() 方法。
jQuery slideUp()
演示 jQuery slideUp() 方法。
jQuery slideToggle()
演示 jQuery slideToggle() 方法。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
div#id_div_content {
text-align: center;
background-color: rgba(223,236,194,0.8);
border: 1px solid #c3c3c3;
padding: 20px;
/*默认隐藏*/
display: none;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button id="id_btn_slideDown" class="class_btn class_btn_green" type="button" >slideDown</button>
<button id="id_btn_slideUp" class="class_btn class_btn_green" type="button" >slideUp</button>
<button id="id_btn_slideToggle" class="class_btn class_btn_green" type="button" >slideToggle</button>
<div id="id_div_content">
<p>あの日見た花の名前を僕達はまだ知らない<br/>
我们仍未知道那年夏天所见到的花的名字</p>
</div>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$("#id_btn_slideDown").click(
function() {
// 展开
$("#id_div_content").slideDown();
}
);
// 添加点击事件
$("#id_btn_slideUp").click(
function() {
// 收起来,折叠
$("#id_div_content").slideUp();
}
);
// 添加点击事件
$("#id_btn_slideToggle").click(
function() {
// 切换 展开和折叠
$("#id_div_content").slideToggle();
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("id_btn").slideToggle();展开和折叠(滑动)
<br/>
slideDown(),slideUp(),slideToggle();
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
jQuery 滑动方法
通过 jQuery,您可以在元素上创建 滑动效果 (展开和折叠)。
jQuery 拥有以下滑动方法:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动展开元素。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒值。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法:
实例
$("#panel").slideDown();
});
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动折叠元素。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒值。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法:
实例
$("#panel").slideUp();
});
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动折叠它们。
如果元素向上滑动,则 slideToggle() 可向下滑动展开它们。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒值。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法:
实例
$("#panel").slideToggle();
});
jQuery 效果- 动画 fixed,relative,absolute
jQuery animate() 方法允许您创建自定义的动画。
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建 自定义动画。
语法:
必需的 key-value_object 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒值。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。
它把 <div> 元素往右边移动了 250 像素:
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button class="class_btn class_btn_green" type="button" >点我试试</button>
<div id="id_div_content" style="position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
あの日見た花の名前を僕達はまだ知らない
</div>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$(".class_btn_green").click(
function() {
// animate参数1是一个对象
$("#id_div_content").animate({right:"0px"});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("div").animate();
<br/>
参数1:是个对象,包含css属性的n个键值对
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
核心代码
$("div").animate( {left:'250px'} );
});
默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。 如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute! |
注意:在 jQuery 的 animate()方法中,
第一个参数是必须的参数,它表示一个对象,包含一组或多组CSS属性和值。
jQuery animate() - 操作多个属性
请注意,生成动画的过程中可同时使用多个属性:
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button class="class_btn class_btn_green" type="button" >点我试试</button>
<div id="id_div_content" style="position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
あの日見た花の名前を僕達はまだ知らない
</div>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$(".class_btn_green").click(
function() {
// animate参数1是一个对象
$("#id_div_content").animate({right:"0px",opacity:"0.5",
height:"150px",
width: "150px"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("div").animate();
<br/>
参数1:是个对象<br/>
注意:position的属性值,必须是以下3者之一<br/>
fixed,relative,absolute
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
核心代码:
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情: 当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名, 比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。 同时,色彩动画 并不包含在核心 jQuery 库中。 如果需要生成颜色动画,您需要从 jquery.com 下载 Color Animations 插件。 |
jQuery animate() - 使用 相对值
也可以定义 相对值(该值相对于元素的当前值)。
需要在值的前面加上 += 或 -=:
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button class="class_btn class_btn_green" type="button" >点我试试</button>
<div id="id_div_content" style="position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
あの日見た花の名前を僕達はまだ知らない
</div>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$(".class_btn_green").click(
function() {
// animate参数1是一个对象
$("#id_div_content").animate({right:"0px",opacity:"-=0.5",
height:"+=70px",
width: "+=70px"
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("div").animate();
<br/>
参数1:是个对象<br/>
注意:position的属性值,必须是以下3者之一<br/>
fixed,relative,absolute<br/>
可以使用+=或-=相对值
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
核心代码:
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用 jQuery预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
实例
$("div").animate({
height:' toggle '
});
});
jQuery animate() - 使用 队列 功能
默认地,jQuery 提供针对动画的 队列 功能。
这意味着如果您在彼此之后编写 多个 animate() 调用,
jQuery 会创建包含这些方法调用的 "内部"队列。然后逐一运行这些 animate 调用。
核心代码:
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");
});
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button class="class_btn class_btn_green" type="button" >点我试试</button>
<div id="id_div_content" style="position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
あの日見た花の名前を僕達はまだ知らない
</div>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$(".class_btn_green").click(
function() {
// animate参数1是一个对象
var divObject = $("#id_div_content");
// 添加第1个动画
divObject.animate({height: "200px",opacity: "0.5"},"slow");
// 添加第2个动画
divObject.animate({width:"200px",opacity:"0.1"},"slow");
// 添加第3个动画
divObject.animate({width:"100px",opacity:"0.5"},"slow");
// 添加第4个动画
divObject.animate({height:"100px",opacity:"1"},"slow");
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("div").animate();
<br/>
参数1:是个对象<br/>
注意:position的属性值,必须是以下3者之一<br/>
fixed,relative,absolute<br/>
可以使用+=或-=相对值<br/>
还可以使用jQuery预定义的值<br/>
动画队列演示
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
下面的例子把 <div> 元素往右边移动了 100 像素,然后增加文本的字号:
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button class="class_btn class_btn_green" type="button" >点我试试</button>
<div id="id_div_content" style="position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
あの花
</div>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$(".class_btn_green").click(
function() {
// animate参数1是一个对象
var divObject = $("#id_div_content");
// 添加第1个动画
divObject.animate({left: "100px"},"slow");
// 添加第2个动画
divObject.animate({width:"150px",height:"70px"},"slow");
// 添加第3个动画
divObject.animate({fontSize:"3em",opacity:"0.9"},"slow");
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("div").animate();
<br/>
参数1:是个对象<br/>
注意:position的属性值,必须是以下3者之一<br/>
fixed,relative,absolute<br/>
可以使用+=或-=相对值<br/>
还可以使用jQuery预定义的值<br/>
动画队列演示
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
核心代码:
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery stop() 方法用于在动画或效果完成前 强行让它们停止。
实例
jQuery stop() 滑动
演示 jQuery stop() 方法。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button id="id_btn_expand" class="class_btn class_btn_green" type="button" >点我展开</button>
<button id="id_btn_stop" class="class_btn class_btn_green" type="button" >强行停止</button>
<div id="id_div_content" style="display:none;position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
あの花
</div>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$("#id_btn_expand").click(
function() {
// jQuery对象
var divObject = $("#id_div_content");
// 添加1个展开的动画
divObject.slideDown(1000);
}
);
// 添加点击事件
$("#id_btn_stop").click(
function() {
// jQuery对象
var divObject = $("#id_div_content");
// 强行停止动画
divObject.stop();
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b>$("div").stop();<br/>
停止动画
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
jQuery stop() 动画(带参数)
演示 jQuery stop() 方法
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于 所有 jQuery 效果 函数,包括 滑动、淡入淡出 和 自定义动画。
语法:
可选的 stopAll 参数规定是否应该清除动画队列。
默认是 false,即仅仅是 停止 正在活动的这个动画,但是,允许任何排入队列的动画 继续向后执行。
可选的 goToEnd 参数规定 是否立即完成 当前动画。默认是 false。
因此,默认地,不带参数的 stop() ,只会清除在 被选元素上正在执行的当前这个动画而已,其他后面的动画还会继续执行。
三种情况:
1.$('#div').stop();
只停止当前动画,后面的动画还会继续执行
2.$('#div').stop(true);
停止所有的动画
3.$('#div').stop(true,true);
停止所有的动画,并且会立刻goToEnd,即立刻变成动画完成时的状态
下面的例子演示 stop() 方法,不带参数:
核心代码: 只停止当前的动画,其他动画继续执行
$("#panel").stop();
});
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button id="id_btn_expand" class="class_btn class_btn_green" type="button" >点我展开</button>
<button id="id_btn_stop" class="class_btn class_btn_green" type="button" >stop()</button>
<button id="id_btn_stopTrue" class="class_btn class_btn_green" type="button" >stop(true)</button>
<button id="id_btn_stopTrueTrue" class="class_btn class_btn_green" type="button" >stop(true,true)</button>
<div id="id_div_content" style="display:none;position:absolute;background-color:rgb(250,128,14);width:100px;height:150px;color:white;">
あの花
</div>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$("#id_btn_expand").click(
function() {
// jQuery对象
var divObject = $("#id_div_content");
// 添加1个展开的动画
divObject.slideDown(1500);
divObject.animate({fontSize:"3em"},"slow");
}
);
// 添加点击事件
$("#id_btn_stop").click(
function() {
// jQuery对象
var divObject = $("#id_div_content");
// 只停止当前动画
divObject.stop();
}
);
// 添加点击事件
$("#id_btn_stopTrue").click(
function() {
// jQuery对象
var divObject = $("#id_div_content");
// 停止所有动画
divObject.stop(true);
}
);
// 添加点击事件
$("#id_btn_stopTrueTrue").click(
function() {
// jQuery对象
var divObject = $("#id_div_content");
// 停止所有动画,并直接跳到当前动画的最后状态
divObject.stop(true,true);
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b><br/>
$("div").stop();停止当前动画,继续执行下一个动画<br/>
$("div").stop(true);停止所有动画<br/>
$("div").stop(true,true);停止所有动画,并直接变成动画结束状态<br/>
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
jQuery Callback 方法
Callback 函数在当前动画 100% 完成之后执行。
jQuery 动画
许多 jQuery 函数涉及动画。这些函数会将 speed 或 duration 作为可选参数。
例子:$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。
为了能在动画完成之后,做一个操作, 您可以以参数的形式添加 Callback 函数。
以下实例在 隐藏效果 完全实现 之后 回调函数:
使用 callback 实例
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
以下实例没有回调函数,警告框会在隐藏效果完成前弹出:
没有 callback(回调)
$("p").hide(1000);
alert("The paragraph is now hidden");
});
jQuery - Chaining
通过 jQuery,可以把 动作/方法 链接 在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
jQuery 方法链接
直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。
不过,有一种名为 链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
提示: 这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。
"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动:
实例
如果需要,我们也可以添加多个方法调用。
提示:当进行链接时,代码行会变得很差。
不过,jQuery 语法不是很严格;您可以按照希望的格式来写,包含换行和缩进。
如下书写也可以很好地运行:
实例
.slideUp(2000)
.slideDown(2000);
jQuery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
</script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
<!-- 引入 jquery 2.1.4 -->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
</script>
<!--<![endif]-->
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button id="id_btn_expand" class="class_btn class_btn_green" type="button" >点我展开</button>
<div id="id_div_content" style="display:none;position:absolute;background-color:rgb(250,128,14);width:100px;height:100px;color:white;">
あの花
</div>
<script type="text/javascript">
$(document).ready(
// 匿名函数
function() {
// 添加点击事件
$("#id_btn_expand").click(
function() {
// jQuery对象
var divObject = $("#id_div_content");
// 添加1个展开的动画
divObject.slideDown("slow",function() {
// body...
$("body").css({"background-color":"black"}).css({"color":"white"});
});
}
);
}
);
</script>
<p class="sgcenter">
<b>注意:</b><br/>
$("div").hide("slow",callback);<br/>
当动画完成时,将执行回调函数
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</body>
</html>
效果如下:
附录:
jQuery 效果方法
下面的表格列出了所有用于创建动画效果的 jQuery 方法。
方法 | 描述 |
---|---|
animate() | 对被选元素应用"自定义"的动画 |
clearQueue() | 对被选元素移除所有排队函数(仍未运行的) |
delay() | 对被选元素的所有排队函数(仍未运行)设置延迟 |
dequeue() | 移除下一个排队函数,然后执行函数 |
fadeIn() | 逐渐改变被选元素的不透明度,从隐藏到可见 |
fadeOut() | 逐渐改变被选元素的不透明度,从可见到隐藏 |
fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
fadeToggle() | 在 fadeIn() 和 fadeOut() 方法之间进行切换 |
finish() | 对被选元素停止、移除并完成所有排队动画 |
hide() | 隐藏被选元素 |
queue() | 显示被选元素的排队函数 |
show() | 显示被选元素 |
slideDown() | 通过调整高度来滑动显示被选元素 |
slideToggle() | slideUp() 和 slideDown() 方法之间的切换 |
slideUp() | 通过调整高度来滑动隐藏被选元素 |
stop() | 停止被选元素上当前正在运行的动画 |
toggle() | hide() 和 show() 方法之间的切换 |
定义和用法
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。
语法 1
$(selector).animate(styles,speed,easing,callback)
参数 | 描述 |
---|---|
styles | 必需。规定产生动画效果的 CSS 样式和值。 可能的 CSS 样式值(提供实例):
注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。 |
speed | 可选。规定动画的速度。默认是 "normal"。 可能的值:
|
easing | 可选。规定在不同的动画点中设置动画速度的 easing 函数。 内置的 easing 函数:
扩展插件中提供更多 easing 函数。 |
callback | 可选。animate 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 |
语法 2
$(selector).animate(styles,options)
参数 | 描述 |
---|---|
styles | 必需。规定产生动画效果的 CSS 样式和值(同上)。 |
options | 可选。规定动画的额外选项。 可能的值:
|
未完待续,下一章节,つづく