web前端之锋利的jQuery五：jQuery中的动画
2016-12-06 15:06
791 查看
web前端之锋利的jQuery五：jQuery中的动画
1.show()、hide()：show方法和hide方法是jQuery中最基本的动画方法。在HTML文档中，为一个元素用hide方法，会将该元素的display样式改为“none”
$(“element”).hide();等同于$(“elemnt”).css(“display”,”none”);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#panel h5.head').hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});
</script>
<style type="text/css">
.content{
display:none;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
</div>
</div>
</body>
</html>2.show()、hide()方法让元素动起来：
show()、hide()不带参数，就和上面表现形式是一样的。但是如果想调用show()方法时，元素慢慢的显示出来，可以为show()方法制定一个速度参数
$(“element”).show(1000);
$(“element”).hide(1000);
代码在1秒内显示或隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#panel h5.head').hover(function(){
$(this).next().show(1000);
},function(){
$(this).next().hide(1000);
});
});
</script>
<style type="text/css">
.content{
display:none;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
</div>
</div>
</body>
</html>fadeln()、fadeOut()：
与show()方法不同的是，fadeIn和fadeOut方法只改变元素的不透明度。fadeOut方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(dispaly:none;)。fadeIn则相反
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#panel h5.head').hover(function(){
$(this).next().fadeIn();
},function(){
$(this).next().fadeOut();
});
});
</script>
<style type="text/css">
.content{
display:none;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
</div>
</div>
</body>
</html>slideUp()、slideDown()：
slideUp方法和slideDown方法只改变元素的高度。如果一个元素的display的属性为none时，调用slideDown方法时，这个元素会从上到下延伸显示。slideUp则相反
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#panel h5.head').hover(function(){
$(this).next().slideDown();
},function(){
$(this).next().slideUp();
});
});
</script>
<style type="text/css">
.content{
display:none;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
</div>
</div>
</body>
</html>自定义简单动画：
前面几个小例子都可以让元素动起来，animate方法也可以让元素动起来，而且animate更具有活性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>动画</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
//$(this).animate({left:"500px"},3000);普通状态
//$(this).animate({left:"+=500px"},3000);累加动画
//$(this).animate({left:"500px",height:"200px"},3000);多重动画
/*按顺序执行多个动画
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000);
*/
//综合动画
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");
});
});
</script>
<style type="text/css">
#panel{
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;/*鼠标样式*/
}
</style>
</head>
<body>
<div id="panel"></div>
</body>
</html>动画回调函数：
上面的小例子中，如果在最后一步想要的是切换CSS样式，只需要按照常规方法：css(“dorder”,”5px solid blue”)。将css()方法写入到最后一个动画的回调函数中，代码如下：
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){
$(this).css("border","5px solid blue");
})
});这样一来，css方法就加入到动画队列中了
callback回调函数适用于jQuery所有的动画效果方法
停止动画和判断是否处于动画状态：
1.停止元素动画(stop方法)：
很多时候需要停止匹配元素正在进行的动画，就需要stop方法了。stop方法的语法结构为：stop([clearQueue].[gotoEnd]);
参数clearQueue和gotoEnd都是可选参数，为Boolean值(ture或flase)。clearQueue代表是否清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态，如果直接使用stop则会立刻停止正在运动的动画
2.判断元素是否处于动画状态(animated方法)：
if(!$(element).is(“:animated”)){
//如果当前没有进行动画，则添加动画
}
3.延迟动画(delay方法)：
在动画执行过程中，如果想对动画进行延迟操作，那么可以使用delay()方法
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.delay(1000)
.animate({top:"200px",wiodth:"200px"},3000)
.delay(2000)
.fadeOut("slow");delay()方法允许我们将队列中的函数延时执行，它既可以推迟动画队列中的函数执行，也可以用于自定义队列
其他动画方法：
toggle(speed,[callback])
toggle方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏，如果元素是隐藏的，则切换可见。
slideToggle(speed,[easing],[callback])
slideToggle方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。
fadeTo(speed,opacity,[callback])
fadeTo可以吧元素的不透明度以渐进的方式调整到指定的值，这个方法只调整不透明度。
fadeTo(600,0.5)
fadeToggle(speed,[easing],[callback])
fadeToggle方法通过不透明变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web前端之锋利的jQuery六：jQuery对表单的操作
- web前端之锋利的jQuery十一：综合开发，编写购物网首页
- Web编程前端之6：如何使jQuery动画效果与程序顺序执行
- web前端之锋利的jQuery七：jQuery表格应用、其他应用
- web前端之锋利的jQuery九：jQuery插件的使用（模态窗口、cookie、UI）
- 8款基于Jquery的WEB前端动画特效
- web前端之锋利的jQuery三：jQuery中的DOM操作
- web前端之锋利的jQuery十：编写jQuery插件
- web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）
- web前端之锋利的jQuery四：jQuery中的事件
- 10款基于jquery的web前端动画特效
- web前端之锋利的jQuery一：认识jQuery
- 锋利的jQuery第四章:jQuery中的事件和动画
- Sublime text 2编辑器（本次用于backbone+jQuery_Mobile+html5的web前端开发）
- 【web前端】jQuery – 鼠标经过(hover)事件的延时处理
- 锋利的jQuery第四章:jQuery中的事件和动画
- 精选推荐 23 款基于jquery的web前端网页特效
- 【免费】TUP大师系列---jQuery之父畅谈Web前端开发【SD软件开发2.0大会门票等你拿！】
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
- 【锋利的JQuery】0x04 JQuery中的事件与动画