jQuery中的动画与特效

时间:2021-09-23 16:33:23

1.显示和隐藏hide()和show()

对于动画来说,显示和隐藏是最基本的效果之一,简单介绍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的自动显隐,渐入渐出、飞入飞出。自定义动画等。 .显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。</em>
</div>

以上是对hide()和show()函数的测试。

2.使用show()、hide()和toggle()方法

上个例子对show()和hide()方法做了简单介绍,其实这两个方法可以接受参数控制显隐藏过程。
语法如下

show(duration,[callback]);
hide(duration,[callback]);

其中,duration表示动画执行时间的长短,可以表示速度的字符串,包括slow(0.6秒),normal(0.4秒),fast(0.2秒).也可以是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成之后执行

<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(); //隐藏
});
$("input:last").click(function() {
$("p").show(); //显示
});
});
</script>

例子和第一个例子相同,只是对hide()和show()增加了时间参数。其实toogle()也可以加入事件参数。

如果直接调用toogle() 也可以实现显示和隐藏

 $(function () {
$("#mybtn").toggle(function () {
$(".hidden").toggle();//获取到隐藏的将其显示
$(this).attr("src", "image/up.jpg");
}, function () {
$(".hidden").toggle();//获取到显示的将其隐藏
$(this).attr("src", "image/down.jpg");
});
});

3.使用fadeIn()和fadeOut()方式

对于动画效果显隐,jQuery还提供了fadeIn()个fadeOut()这两个实用的方法,他们的动画效果类似褪色,语法与show()和hide()完全相同。

fadeIn(duration, [callback]);
            fadeOut(duration,
[callback]);
例子

<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(); //逐渐fadeOut
});
$("input:eq(1)").click(function() {
$("img").fadeIn(); //逐渐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();
});
$("input:eq(1)").click(function() {
$("img").fadeIn();
});
$("input:eq(2)").click(function() {
$("img").fadeTo(, 0.5);
});
$("input:eq(3)").click(function() {
$("img").fadeTo(, );
});
});
</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 这一章。

除非设置了 speed 参数,否则不能设置该参数。

4.幻灯片slideUp和slideDown效果

<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("div").add("img").slideUp();
});
$("input:eq(1)").click(function() {
$("div").add("img").slideDown();
});
$("input:eq(2)").click(function() {
$("div").add("img").hide();
});
$("input:eq(3)").click(function() {
$("div").add("img").show();
});
});
</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">

5.自定义动画

考虑到框架的通用性及代码文件的大小,jQuery不能涵盖所有的动画效果,但它提供了animate()方法,能够使开发者自定义动画。本节主要通过介绍animate()方法的两种形式及应用。

animate()方法给开发者很大的空间。它一共有两种形式。第一种形式比较常用。用法如下

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 #;
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"
}, );
});
});
</script>
<button id="go">Go>></button>
<div id="block">动画!</div>

在params中,jQuery还可以用“+=”或者"-="来表示相对变化。如

<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #;
margin-top: 5px;
padding: 5px;
text-align: center;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
$("#block").animate({
left: "-=80px" //相对左移
}, );
});
$("button:last").click(function() {
$("#block").animate({
left: "+=80px" //相对右移
}, );
});
});
</script>
<button >Go>></button>
<button >Go>></button>
<div id="block">动画!</div>

先将div进行绝对定位,然后使用animate()中的-=和+=分别实现相对左移和相对右移。

animate()方法还有另外一种形式,如下所示:

animate(params,options)
其中,params与第一种形式完全相同,options为动画可选参数列表,主要包括duration,esaing,callback,queue等,其中duration.easing.callback与第一种形式完全一样,queue为布尔值,表示当有多个
animate()组成jQuery时,当前animate()紧接这下一个animate(),是按顺序执行(true)还是同时触发false

如下例子,展示了animate()第二种用法。

    <style>
div {
background-color: #FFFF22;
width: 100px;
text-align: center;
border: 2px solid #;
margin: 3px;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
input {
border: 1px solid #;
}
</style>
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
//第一个animate与第二个animate同时执行,然后再执行第三个
$("#block1").animate({
width: "90%"
}, {
queue: false,
duration:
})
.animate({
fontSize: "24px"
}, )
.animate({
borderRightWidth: "20px"
}, );
});
$("input:eq(1)").click(function() {
//依次执行三个animate
$("#block2").animate({
width: "90%"
}, )
.animate({
fontSize: "24px"
}, )
.animate({
borderRightWidth: "20px"
}, );
});
$("input:eq(2)").click(function() {
$("input:eq(0)").click();
$("input:eq(1)").click();
});
$("input:eq(3)").click(function() {
//恢复默认设置
$("div").css({
width: "",
fontSize: "",
borderWidth: ""
});
});
});
</script>
<input type="button" id="go1" value="Block1动画">
<input type="button" id="go2" value="Block2动画">
<input type="button" id="go3" value="同时动画">
<input type="button" id="go4" value="重置">
<div id="block1">Block1</div>
<div id="block2">Block2</div>

以上两个div块同时运用了三个动画效果,其中第一个div快的第一个动画添加了queue:false参数,使得前两项两个动画同时执行。