读<jquery 权威指南>[3]-动画

来源:互联网 时间:1970-01-01

一、 显示与隐藏——hide(),show()

1. 方法:

  • hide(speed,[callback]);
  • show(speed,[callback]);

     说明:这两个方法还可以实现带动画效果的显示隐藏。speed可以是“slow"(600毫秒)、"normal"(400毫秒)、"fast"(200毫秒),可以直接是毫秒数。

      callback是动画执行完的回调函数。

2.实例:

<style type="text/css">

body {

font-size: 13px;

}

.artFram {

border: solid 1px #ccc;

background-color: #eee;

width: 260px;

padding: 8px;

word-break: break-all;

}

.artList {

line-height: 1.8em;

}

</style>

<div class="artFram">

<div class="artList">

<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

<span>jQuery</span>

<span style="display:none">--write less,do more.</span>

&nbsp;<a href="javascript:void(0)">显示</a>

</div>

</div>

html

<script type="text/javascript">

$(function () {

var $link = $(".artList a");

var $hide = $(".artList :eq(2)");

$link.click(function () {

if ($(this).html() == "显示") {

$(this).html("隐藏");

$hide.show(1000,function(){alert("显示")});

} else {

$(this).html("显示");

$hide.hide(800, function () { alert("隐藏")});

}

})

});

</script>

二、切换显示隐藏——toggle()

1. 方法

  • toggle():无参数,直接切换显示隐藏状态;
  • toggle(switch):switch是布尔值,true显示元素,false隐藏元素。
  • toggle(speed,[callback]):speed为切换速度;callback为动画效果执行之后的回调函数。

说明:当以动画效果展示时,元素的width,height,padding,margin都以动画形式展示。

2. 实例:

<div class="divFrame">

<div class="divMenu">

<input id="Button1" type="button" value="无参数"/><br />

<input id="Button2" type="button" value="逻辑显示" /><br />

<input id="Button3" type="button" value="动画显示"/>

</div>

<div class="divContent">

<img src="Images/img03.jpg" alt="" />

</div>

</div>

html

<script type="text/javascript">

var isShow = false;

var title = $(".divTitle");

var content = $(".divContent");

$(function () {

title.click(function () {

if (isShow) {

$("img").slideUp("normal", function () {

$("#divTip").html("关闭成功");

isShow = false;

});

} else {

$("img").slideDown("normal");

$("#divTip").html("");

isShow = true;

}

});

});

</script>

三、滑动效果——slide

  • slideUp(speed,[callback]):向上滑动,减小元素高度至0
  • slideDow(speed,[callback]):向下滑动,增大元素高度。
  • slideToggle(speed,[callback]):以动画效果切换元素高度。

四、淡入淡出——fade

1. 淡入淡出方法

  • fadeIn(speed,[callback]):淡入,透明度由0.0到1.0;
  • fadeOut(speed,[callback]):淡出,透明度由1.0到0.0;

实例:

<div class="divFrame">

<div class="divTitle">

<input id="Button1" type="button" value="fadeIn" class="btn" />

<input id="Button2" type="button" value="fadeOut" class="btn" />

</div>

<div class="divContent">

<div class="divTip"></div>

<img src="Images/img05.jpg" alt="" title="风景图片" style="display:none;" />

</div>

</div>

html

<script type="text/javascript">

$(function () {

$img = $("img"); //图片元素对象

$tip = $(".divTip"); //提示元素对象

$("#Button1").click(function () { //第一个按钮单击事件

$tip.html(""); //清空提示内容

//在2000毫秒中淡入图片,并执行一个回调函数

$img.fadeIn(2000, function () {

$tip.html("淡入成功!");

})

})

$("#Button2").click(function () { //第二个按钮单击事件

$tip.html(""); //清空提示内容

//在2000毫秒中淡出图片,并执行一个回调函数

$img.fadeOut(2000, function () {

$tip.html("淡出成功!");

})

})

})

</script>

2. fadeTo(speed,opacity,[callback]):以动画效果将透明度设置为一个指定值,还可以设置回调函数。

实例:

<input type="button" id="btn" value="click" />

<div class="divContent">

<img src="Images/img06.jpg" alt="" title="风景图片" />

</div>

html

<script type="text/javascript">

$(function () {

var opacity = 0.0;

$("#btn").click(function () {

if (opacity >= 1.0) {

opacity = 0.0;

} else {

opacity += opacity + 0.2;

}

$("img").fadeTo("normal", opacity);

});

});

</script>

五、自定义动画——animate

1.方法 :

animate(params,[duration],[easing],[callback])

说明:param表示要调整的属性键值对,duration表示速度,easing表示动画插件,callback表示动画效果完成后的回调效果。

注意:

params的属性名要使用骆驼写法,例如font-size要写成fontSize。

如果想以动画形式移动元素位置,则position必须设置为relative或者absolute。

队列动画:在元素中执行一个或者多个animate方法。


相关阅读:
Top