细说 jQuery 样式篇（二） - 动画效果

PiscesYE 发布于2019-08-19 14:53 / 751人阅读

摘要：创建一个有背景色的添加方法如下当页面载入后，会逐渐消失，动画效果如同直接使用方法。动画并发效果当对多个元素应用动画效果时，这些效果是同时发生的，即并发的。

除了使用 jQuery 内置的 hide,show,toggle 等方法来展现效果，还可以使用更为强大的 animate 方法来展现动画效果。
创建一个有背景色的 div：

添加 jQuery 方法如下：

$(function() {
  $("div").animate({"height": "hide"}, "slow");
});

当页面载入后，div 会逐渐消失，动画效果如同直接使用 hide 方法。
animate 的第一个参数为包含属性及其值的对象，第二个参数为时长。

两种形式

.animate() 方法有两种形式：

第一种形式有四个参数：
1.一个包含样式属性及值的对象
2.可选的时长参数
3.可选的缓动（easing）类型
4.可选的回调函数

第二种形式有两个参数：
1.一个属性对象
2.一个选项对象

多个属性添加动画效果

仍旧以上例中的 div 为例，我们可以同时对该 div 的多个属性添加动画效果，添加 jQuery 代码如下：

$("div").animate({"height": "+=100px", "width": "+=100px"}, "slow");

此时对 div 的 height 和 width 属性同时生效，div 扩大一倍。

动画排队效果

对多个属性添加动画效果时，如果我们希望效果具有先后顺序，即排队效果的话，可以使用 jQuery 连缀来实现。
同样是上例，修改 jQuery 代码如下：

  $("div").animate({"height": "+=100px"}, "slow") 
          .animate({"width": "+=100px"}, "slow");//连缀

此时，div 的 height 属性先发生变化，width 属性随后发生变化。

queue 属性

这里使用 animate 方法的第二种形式来测试 queue 属性：
1.当 queue 值为 false 时

  $("div").animate({"height": "+=100px"}, {duration: "slow", queue: false})
          .animate({"width": "+=100px"}, {duration: "slow", queue: false});

此时，排队效果失效，div 的 height 和 width 属性变化同时发生。
2.当 queue 值为 true 时

  $("div").animate({"height": "+=100px"}, {duration: "slow", queue: true})
          .animate({"width": "+=100px"}, {duration: "slow", queue: true});

此时，排队效果生效，div 的 height 属性先发生变化，width 属性随后发生变化。

动画并发效果

当对多个元素应用动画效果时，这些效果是同时发生的，即并发的。举例如下：

jQuery 代码如下：

$(function() {
  $("#a").animate({"height": "+=100px"}, "slow");
  $("#b").animate({"height": "+=100px"}, "slow");
});

此时页面载入后，id 为 a 和 b 的 div 的高度同时发生改变。

参考

http://book.douban.com/subject/24669823/

GPU云服务器云服务器 jquery动画效果浮动效果动画翻转动画效果 html动画效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78160.html

细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0
细说 jQuery DOM操作篇（二） - DOM 树操作

摘要：此时，点击新建的将会触发。设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容方法同理。我们知道通过 $() 函数可以访问文档中的元素，并返回一个 jQuery 对象，并且通过一系列方法，我们可以修改元素的样式和内容，实际上，我们还可以通过该函数做更多的事情，例如添加、删除、复制等操作来改变 DOM 树的结构。创建元素我们可以通过 $() ...

Anchorer 2019-08-21 12:20 评论0 收藏0
细说 jQuery 样式篇（一） - 样式的获取与设置

摘要：在元素一篇学习了通过方法可以为元素添加样式，但是对样式的操作不仅仅限于添加，例如取得元素特定样式，设置元素样式等等。设置样式提供了一个方法来操作样式，这个方法将获取样式设置样式的作用集中了在一起，非常方便我们对元素样式进行操作。在元素一篇学习了通过 addClass 方法可以为元素添加样式，但是对样式的操作不仅仅限于添加，例如取得元素特定样式，设置元素样式等等。设置样式 jQu...

chengtao1633 2019-08-19 14:53 评论0 收藏0
细说 jQuery 元素篇（二） - 选择符

摘要：为了更方便对元素操作，提供了完整的选择符体系，可以分为选择符属性选择符以及自定选择符。选择符几乎支持到规范中的所有选择符。介绍个比较有用的自定义选择符选择符。为了更方便对 DOM 元素操作，jQuery 提供了完整的选择符体系，可以分为 CSS 选择符、属性选择符以及自定选择符。 CSS 选择符 jQuery 几乎支持 CSS1 到 CSS3 规范中的所有选择符。举例如下： ...

104828720 2019-08-19 14:51 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0