jQuery学习笔记之（一）动画与特效
来源：程序员人生 发布时间：2015-02-10 08:34:54 阅读次数：3043次
本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。
1.显示和隐藏hide()和show()
对动画来讲，显示和隐藏是最基本的效果之1，本节简单介绍jQuery的显示和隐藏。
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(); //隐藏
});
$("input:last").click(function() {
$("p").show(); //显示
});
});
</script>
<input type="button" value="Hide">
<input type="button" value="Show">
<p>点击按钮，看看效果</p>
<div><em>本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对动画来讲，显示和隐藏是最基本的效果之1，本节简单介绍jQuery的显示和隐藏。</em>
</div>
以上是对hide()和show()函数的测试。
2.使用show()、hide()和toggle()方法
上个例子对show()和hide()方法做了简单介绍，其实这两个方法可以接受参数控制显隐藏进程。
语法以下
show(duration,[callback]);
hide(duration,[callback]);
其中，duration表示动画履行时间的长短，可以表示速度的字符串，包括slow,normal,fast.也能够是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成以后履行。
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(300); //隐藏
});
$("input:last").click(function() {
$("p").show(500); //显示
});
});
</script>
例子和第1个例子相同，只是对hide()和show()增加了时间参数。其实toogle()也能够加入事件参数。
2.使用fadeIn()和fadeOut()方式
对动画效果显隐，jQuery还提供了fadeIn()个fadeOut这两个实用的方法，他们的动画效果类似退色，语法与slow()和hide()完全相同。
fadeIn(duration, [callback]);
fadeOut(duration, [callback]);
例子
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(3000); //逐步fadeOut
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000); //逐步fadeIn
});
});
</script>
<img src="http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.jpg">
<input type="button" value="Hide">
<input type="button" value="Show">
fadeTo()方法的使用。
fadeTo() 方法将被选元素的不透明度逐步地改变成指定的值。
例子：
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(1000);
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function() {
$("img").fadeTo(1000, 0.5);
});
$("input:eq(3)").click(function() {
$("img").fadeTo(1000, 0);
});
});
</script>
<p><img src="03.jpg"></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">
fadeOut相干参数
|
speed |
可选。规定元素从当前透明度到指定透明度的速度。
可能的值：
- 毫秒 （比如 1500）
- "slow"
- "normal"
- "fast"
|
|
opacity |
必须。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。 |
|
callback |
可选。fadeTo 函数履行完以后，要履行的函数。
如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这1章。
除非设置了 speed 参数，否则不能设置该参数。
|
3.幻灯片slideUp和slideDown效果
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("div").add("img").slideUp(1000);
});
$("input:eq(1)").click(function() {
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function() {
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function() {
$("div").add("img").show(1000);
});
});
</script>
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<input type="button" value="Hide">
<input type="button" value="Show"><br>
<div></div><img src="04.jpg">
前面提到了几种动画效果，jQuery还提供了slideUp()和slideDown()来摹拟PPT中的类似幻灯片拉帘效果，它与slow()和hide()完全相同。
以上代码定义了1个div和1个img,用add方法组合在1起。
4.自定义动画
斟酌到框架的通用性及代码文件的大小，jQuery不能涵盖所有的动画效果，但它提供了animate()方法，能够使开发者自定义动画。本节主要通过介绍animate()方法的两种情势及利用。
animate()方法给开发者很大的空间。它1共有两种情势。第1种情势比较经常使用。用法以下
animate(params,[duration],[easing],[callback])
其中params为希望进行变幻的css属性列表，和希望变化到的终究值，duration为可选项，与show()/hide()的参数含义完全相同。easing为可选参数，通常供动画插件使用。 用来控制节奏的变化进程。jQuery中只提供了linear和swing两个值.callback为可选的回调函数。在动画完成后触发。
需要注意。params中的变量遵守camel命名方式。例如paddingLeft不能写成padding-left.另外，params只能是css中用数值表示的属性。例如width.top.opacity等
像backgroundColor这样的属性不被animate支持。
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("#block").animate({
opacity: "0.5",
width: "80%",
height: "100px",
borderWidth: "5px",
fontSize: "30px",
marginTop: "40px",
marginLeft: "20px"
}, 2000);
});
});
</script>
<button id="go">Go>></button>
<div id="block">动画！</div>
在params中，jQuery还可以用“+=”或"-="来表示相对变化。如
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
$("#block").animate({
left: "-=80px" //相对左移
}, 300);
});
$("button:last").click(function() {
$("#block").animate({
left: "+=80px" //相对右移
}, 300);
});
});
</script>
<button >Go>>
</
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
------分隔线----------------------------
------分隔线----------------------------
