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

最新推荐文章于 2021-08-18 20:13:30 发布
最新推荐文章于 2021-08-18 20:13:30 发布
阅读量1k 收藏
点赞数 1
分类专栏： html+js+jquery+xml+ajax 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Magneto7/article/details/23270227
版权


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>


栖息
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中的动画
m0_68169119的博客
08-15 2441
jQuery中的动画
JQuery学习(7)动画
gongth_12的专栏
05-06 791
首先 最常用的 hide show $(function () { $('#spinfo').click(function () { if ($(this).text() == '隐藏') { $('#divcontent').hide(2000, function () {
JQuery中的几种基础动画
胡振涛
04-19 1420
JQuery中有三种基础的动画，分别是：显示（show）与隐藏（hide）与切换（toggle）、滑入（ slideDown）与滑出（ slidell）与切换（ slide Toggle），效果与卷帘门类似、谈入 faden）与淡出 （fadeOut）与切换（fade Toggle）。 首先是显示（show）与隐藏（hide）与切换（toggle），三种方法的用法是...
jQuery（二）jQuery 效果、toggle()、fadeToggle()、fadeTo() 、slideToggle() 、animate()驼峰表示、动画队列、链(Chaining)
qq_43456781的博客
08-18 845
jQuery（二）jQuery 效果、toggle()、fadeToggle()、fadeTo() 、slideToggle() 、animate()驼峰表示、动画队列、链(Chaining) 文章目录jQuery（二）jQuery 效果、toggle()、fadeToggle()、fadeTo() 、slideToggle() 、animate()驼峰表示、动画队列、链(Chaining)1. 隐藏和显示jQuery hide() 和 show()jQuery toggle()2. 淡入淡出jQuery
jQuery: 动画案例二
willard_cui的博客
08-04 276
动画：鼠标移动到一级菜单上时，打开对应的二级菜单，移出时关闭该二级菜单。 使用的jQuery方法：slideDown(), slideUp(), stop(), find(), mouseenter(), mouseleave()。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset...
Jquery学习笔记分享
11-24
### 第3章：jQuery中的DOM操作 1. **插入节点**：`before()`, `after()`, `prepend()`, `append()`等方法可以方便地在现有元素前后插入新内容。 2. **删除节点**：`remove()`用于删除匹配的元素，`detach()`则保留...
前端jquery学习资料
最新发布
08-24
jQuery生态系统中有大量的第三方插件，如Bootstrap、jQuery UI等，它们提供了丰富的组件和功能。学会如何查找、引入和使用这些插件，将极大丰富你的开发工具箱。 总结来说，这个前端jQuery学习资料包涵盖了jQuery的...
jQuery中文转换成拼音代码
06-10
转换过程中，需要将每个中文字符解码为Unicode，然后使用特定的算法或者第三方库（如pinyin.js）来获取对应的拼音。这个过程可能涉及到多音字处理，即一个汉字对应多个读音的情况，需要根据语境选择合适的拼音。 ...
jQuery动画图片拖动排序效果
08-01
在本文中，我们将深入探讨如何使用jQuery库来创建一个动态的、可拖动排序的图片列表，以此实现“jQuery动画图片拖动排序效果”。这个功能是通过jQuery的事件监听、DOM操作以及动画功能来实现的，它使得用户可以通过...
jQuery文字动画特效插件
12-10
6. **自定义扩展**：如果animate.css的动画效果不能满足需求，开发者可以自定义CSS动画，或者寻找其他第三方库进行扩展。 ### 文件结构分析 - **index.html**: 主要展示插件的示例，包括已实现的文字动画效果。 - ...
Intellij IDEA12错误、警告等提示颜色的修改
热门推荐
octopus的专栏
04-12 2万+
intelliJ里默认的颜色提示不好辨认 Settings->IDE Settings->Editor->Colors & Fonts->General在右侧找到需要修改的信息，如下图：
前端如何实现图片懒加载(lazyload) 提高用户体验
octopus的专栏
02-17 7264
定义 图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。  惰性加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。 实现 懒加载的难点在于确定某张图片是否是用户需要的资源，在浏览器中，用户需要的是可视区内的资源，因此我们只需要判断图片是否
js:深入prototype（下：原型重写）
octopus的专栏
05-03 3404
//当属性和方法特别多时，编写起来不是很方便，可以通过json的格式来编写 //由于原型重写，而且没有通过Person.prototype来指定，此时的constructor不会再指向Person而是指向Object //如果constructor真的比较重要，可以在json中说明原型的指向 function Person(){    } Person.prototype = {
js:深入prototype（上：内存分析）
octopus的专栏
05-03 2942
/**  * 以下演示了通过原型的创建方式，使用基于原型的创建可以将属性和方法  * 设置为Person专有的，不能通过window来调用。  * 原型是javascript中的一个特殊对象，当一个函数创建之后，会随之就产生一个原型对象  * 当通过这个这个函数的构造函数创建了一个具体的对象之后，在这个具体的对象中，就会有一个属性指向原型  */ //第一种状态
Script标签与访问HTML页面
octopus的专栏
08-05 2521
Script标签与访问HTML页面 Script标签 script标签用于在HTML页面中嵌入一些可执的脚本 //some script goes here script标签有三个特殊的属性(当然,像id,class这样的属性它也是有的,HTML页面中几乎每个元素都可以有class,id属性) //language属性指明标签里包含的脚本所使用的语言 //它有三个常见的
js:深入函数的定义
octopus的专栏
04-27 2174
函数定义方式： 1.function fun1(){alert("fun1");}  //函数就是一个非常特殊的对象，是一个Function的实例，其实在内存中存储的操作是通过一个键值对来存储的。 2.由于函数是一个对象，所以可以通过如下方式定义 var fun2 = fun1;  //通过函数拷贝给fun2完成赋值，但fun1、fun2这两个引用并没有指向同一个对象(虽然他们指向的对象的内
XHR
octopus的专栏
08-05 2145
XHR——XMLHttpRequest对象 创建XMLHttpRequest对象 与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest 不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XMLHTTP 之后变成Ms
jQuery基础教程(第2版)中文PDF：全面学习资料
"jQuery基础教程(第2版).pdf - 中文版 jQuery 基础教程，适合初学者学习掌握 jQuery 库的使用方法和技巧。" jQuery 是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作和Ajax...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值