`
webdev2014
  • 浏览: 680656 次
文章分类
社区版块
存档分类
最新评论

jQuery学习第六课(jquery中的动画)

 
阅读更多


1.基础动画

2.渐变动画

3.滑动动画

4.自定义动画
5.动画队列



• jquery中的基础动画(略，见前面的课)


a. show()显示

b. hide()隐藏

c. toggle()切换show/hide


• jquery中的渐变动画


a. fadeIn()

b. fadeOut()

c. fadeTo()

d. fadeToggle()切换fadeIn/fadeOut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>demo6</title>
<script src="jquery.js"></script>
<style>
p{
width: 300px;
padding: 10px;
border: 1px solid #abcdef;
/*display: none;*/
}
</style>
</head>
<body>
<a href="###">点击</a>
<p>Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。</p>

<script>
/*$('a').click(function(){
//透明度opacity从0变成1
$('p').fadeIn(1000);
});*/

/*$('a').click(function(){
//透明度opacity从1变成0
$('p').fadeOut(1000);
})*/

/*$('a').click(function(){
$('p').fadeTo(1000,.3,function(){
alert('fadeTo方法执行完成');
});
});*/

$('a').click(function(){
$('p').fadeToggle(500);
});
</script>
</body>
</html>



• jquery中的滑动动画

a. slideDown()

b. slideUp()

c. slideToggle()

<script>
/*$('a').click(function(){
$('p').slideDown(500);//向下滑动显示隐藏的元素
});*/

/*$('a').click(function(){
$('p').slideUp(500););//与slideDown相反，向上收起隐藏显示的元素
});*/

$('a').click(function(){
$('p').slideToggle(500);//切换slideDown/slideUp
});
</script>

• animate自定义动画

• jquery中的动画队列


stop()

dequeue()

finish()

delay()

jQuery.fx.interval()，设置运动的时间，不推荐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>demo9</title>
<script src="jquery.js"></script>
<style>
p{
width: 300px;
height: 300px;
background: #abcdef;
display: none;
}
</style>
</head>
<body>
<a href="###">aaaaaa</a>
<p>bbbbbbbbb</p>

<script>
$('a').hover(function(){
$('p').stop(false,true).slideDown(500);
},function(){
$('p').stop(false,true).slideUp(500);
});
</script>
</body>
</html>

---------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>demo10</title>
<style>
div{
width: 50px;
height: 50px;
background: #f60;
position: absolute;
left: 10px;
top: 40px;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<button>RUN</button>
<input id="stop" type="button" value="stop" />
<input id="dequeue" type="button" value="dequeue" />
<input id="finish" type="button" value="finish" />
<div></div>

<script>
$('button').click(function(){
$('div').animate({
'top':'400px'
},2000).animate({
'left':'800px'
},2000).animate({
'top':'40px'
},2000).animate({
'left':'10px'
},2000);
});

$('#stop').click(function(){
$('div').stop(false,true);
});

$('#dequeue').click(function(){
$('div').dequeue();
});

$('#finish').click(function(){
$('div').finish();
});
</script>
</body>
</html>

• jquery动画算法插件

先要下载easing插件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>demo12</title>
<script src="jquery.js"></script>
<script src="easing.js"></script>
<style>
div{
width: 50px;
height: 50px;
position: absolute;
left: 10px;
top: 40px;
background: #abcdef;
}
</style>
</head>
<body>
<input type="button" value="点击" />
<div></div>

<script>
$('input').click(function(){
$('div').animate({'left':'800px'},2000,'easeOutBounce');
});
</script>
</body>
</html>

//jquery中函数的参数有‘easing’这一项，即可用easing插件中的方法，

表示元素在动画中的过渡时使用的缓动函数。

<body>
<input type="button" value="点击" />
<div></div>

<script>
$('input').click(function(){
$('div').animate({'left':'-=100px'},2000);
});
</script>
</body>
分享到：
| jQuery学习第五课(jquery中的事件和事件对 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery动画特效---精通JavaScript+jQuery

    第6课 - JavaScript事件 - [精通JavaScript+jQuery] 第7课 - 表格与表单 - [精通JavaScript+jQuery] 第8课 - Javascript调试与优化 - [精通JavaScript+jQuery] 第9课 - Ajax - [精通JavaScript+jQuery] jQuery...

    jQuery jQuery第四版PDF

    本书前6章以通俗易懂的方式讲解了jQuery的核心组件，包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加...

    jQuery开发技术详解

    第6章 使用选择器获得要操作的元素 第7章 操作得到的元素 第8章 使用jQuery进行DOM操作 第9章 jQuery中的事件处理 第10章 jQuery中的动画与效果 第11章 jQuery与AJAX 第12章 回头重看jQuery——核心及工具 第13章 ...

    从零开始学习JQuery

    从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (九) jQuery工具函数 从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 一....

    jQuery教程学习

    第六章：效果篇 - jQuery中的动画效果 第二十六节：jQuery速成- 动画实现的基本方法 第二十七节：jQuery速成- 元素的渐隐渐显 第二十八节：jQuery速成- 元素的滑动 第二十九节：jQuery速成- 自定义动画 第七章：工具...

    jQuery基础教程（第四版）

    本书前6章以通俗易懂的方式讲解了jQuery的核心组件，包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加...

    jQuery基础教程（第四版），完整高清版

    本书前6章以通俗易懂的方式讲解了jQuery的核心组件，包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加...

    jQuery基础教程--第四版（2013年出版）

    的方式讲解了jQuery的核心组件，包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章 和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更 加深入地探讨了...

    JQuery基础教程(第4版)

    的方式讲解了jQuery 的核心组件 包括jQuery 的选择符 事件 动画 DOM 操作 Ajax 支持等 第7 章 ， 、 、 、 、 。 和第8 章介绍了jQuery UI jQuery Mobile 及利用jQuery 强大的扩展能力开发自定义插件 随后的几章...

    jQuery基础教程（第4版）李松峰(译) 中文 非扫描版 高清带书签

    本书前6章以通俗易懂的方式讲解了jQuery的核心组件，包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加...

    jQuery权威指南-源代码

    第6章　Ajax在jQuery中的应用/159 6.1　加载异步数据/160 6.1.1　传统的JavaScript方法/160 6.1.2　jQuery中的load()方法/162 6.1.3　jQuery中的全局函数getJSON()/164 6.1.4　jQuery中的全局函数getScript()/166 ...

    jQuery基础教程

    的方式讲解了jQuery 的核心组件，包括jQuery 的选择符、事件、动画、DOM 操作、Ajax 支持等。第7 章 和第8 章介绍了jQuery UI、jQuery Mobile 及利用jQuery 强大的扩展能力开发自定义插件。随后的几章更 加深入地...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示...105. 推荐jquery动画...

    JQuery权威指南源代码

    第6章 传统的JavaScript方法实现Ajax功能 load()方法实现Ajax功能 getJSON函数获取数据 getScript函数获取数据 get实现异步获取xml文档数据 $.get发送请求 $.post发送请求 serialize()序列化表单 $.ajax()...

    jquery插件使用方法大全

    正如Using Deferreds in jQuery 1.5一文中说明的，其结果是在jQuery中能够将依赖于某个任务（事件）结果的逻辑与任务本身解耦了。这一点在JavaScript中其实并不新鲜，Mochikit和Dojo等已经实现有些日子了。由于...

    jQuery基础教程 第四版

    本书前 6 章以通俗易懂 的方式讲解了 jQuery 的核心组件，包括 jQuery 的选择符、事件、动画、DOM 操作、Ajax 支持等。第 7 章 和第 8 章介绍了 jQuery UI、jQuery Mobile 及利用 jQuery 强大的扩展能力开发自定义...

    jquerydemo

    1. 第一个 jQuery 程序 2. jQuery 对象和 DOM 对象 3. 基本选择器 4. 层次选择器 5. 基本过滤选择器 6. 内容过滤选择器 7. 可见性过滤选择器 8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小...

    jQuery技术内幕：深入解析jQuery架构设计与实现原理

    鉴于这种复杂的体系架构，以及对浏览器缺陷的完善也非短期可以完成，开始为这款机顶盒浏览器移植jQuery，从而开始了对jQuery源码的学习和分析。 从2011年6月开始，开始把心得和记录整理成《jQuery 1.6.1源码分析系列...

    超实用的jQuery代码段

    第6章 jQuery实现拖放功能 6.1 基本拖放功能 6.2 基于事件的拖放 6.3 限制移动范围的拖放 6.4 延迟进行的拖放 6.5 具有对齐功能的拖放 6.6 自动滚动的拖放 6.7 反转位置的拖放 6.8 使用事件监控拖曳次数 6.9 拖动时...

Magicbox
Global site tag (gtag.js) - Google Analytics