初学jQuery动画效果

最新推荐文章于 2023-02-01 21:04:21 发布
最新推荐文章于 2023-02-01 21:04:21 发布
阅读量355 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CC_leather/article/details/52303051
版权

学习了jQuery动画效果后，感觉animate方法的功能还是很强大的，当然，我接下来的这段代码也只算是浅尝辄止，后面会随着学习的深入会不断提高动画效果和代码质量，希望各位大神指点。


这段代码是在样例的基础上进行了修改，实现了四个方块的转动，并最终回到起始位置。这里面主要是用到了animate方法的队列功能，同时也要注意div块的position属性的设置，为fixed，absolute或relative。


接下来为完整源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").animate({top:'300px',opacity:'0.4'},"slow");
    $("#div1").animate({left:'206px',opacity:'0.8'},"slow");
    $("#div1").animate({top:'100px',opacity:'0.4'},"slow");
    $("#div1").animate({left:'6px',opacity:'0.8'},"slow");
 
    $("#div2").animate({left:'206px',opacity:'0.4'},"slow");
    $("#div2").animate({top:'100px',opacity:'0.8'},"slow");
    $("#div2").animate({left:'6px',opacity:'0.4'},"slow");
    $("#div2").animate({top:'300px',opacity:'0.8'},"slow");
 
  $("#div3").animate({top:'100px',opacity:'0.4'},"slow");
    $("#div3").animate({left:'6px',opacity:'0.8'},"slow");
    $("#div3").animate({top:'300px',opacity:'0.4'},"slow");
    $("#div3").animate({left:'206px',opacity:'0.8'},"slow");
 
  $("#div4").animate({left:'6px',opacity:'0.4'},"slow");
    $("#div4").animate({top:'300px',opacity:'0.8'},"slow");
    $("#div4").animate({left:'206px',opacity:'0.4'},"slow");
    $("#div4").animate({top:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div id="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;top:100px;">
</div>
<div id="div2" style="background:#672821;height:100px;width:100px;position:absolute;top:300px">
</div>
<div id="div3" style="background:#bbb736;height:100px;width:100px;position:absolute;top:300px;left:206px;">
</div>
<div id="div4" style="background:#ffc629;height:100px;width:100px;position:absolute;left:206px;top:100px">
</div>


</body>
</html>


接下来为效果图：


四个方块按箭头方向同时转动，伴随透明效果，每个div块最终会回到起始位置，动画结束。

CC_leather
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
jQuery初学
qiumanre的博客
09-28 111
一、jQuery概述 Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的Ja
jQuery图片切换动画效果 处理动画延迟
PorGer333的博客
02-27 1653
jq图片切换动画，处理快速点击动画延迟。
CSS 实现⼀个 div 向右平移 100px 的动画
weixin_49046136的博客
05-20 1890
实现⼀个 div 向右平移 100px 的动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css 实现⼀个 div 向右平移 100px 的动画</title> <
jQuery动画效果-向右移动
qs1571292935的博客
09-11 3812
$(document).ready(function(){   $("button").click(function(){     $("div").animate({left:'250px'});   }); });     开始动画
JavaScript jQuery动画效果
weixin_47255539的博客
05-07 140
//1.0 jQuery中的自定义动画 Animation /* 前面几个方法，都是jQuery中定义的比较简单的动画效果，如果想要实现更为复杂的动画，则需要使用animation动画实现 - animate(params,[speed],[easing],[fn]) 用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“...
初学jQuery
Hannaaa的博客
09-25 139
一、什么是jQuery jQuery其实是一堆普通的js函数（库） 1、为什么会出现jQuery？ 减少原生js代码对dom操作时大量记忆方法。 jQuery累积了大量的插件库，极大的简化了项目的开发。 jQuery已经更新到了3.6.0版本，但是兼容性不太好。（jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 |
初学jQuery(冒泡事件，动画效果)
weixin_47846466的博客
09-29 213
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。 HTML代码： <div id="content"> 外层div <div id="msg"> 内层div
初学jQuery（2）：jQuery-DOM操作 + 动画效果 + 常用静态方法介绍 + jQuery插件介绍
lalala_dxf的博客
05-04 573
文章目录1、jQuery-DOM操作1.1 内容操作1.2 属性操作方法1.2.1 通用属性操作1.2.2 对class属性操作1.3 增删元素操作2、JQuery动画显示和隐藏元素动画3、jQurey静态方法数组及对象操作遍历测试方法字符串操作4、jQuery插件机制 1、jQuery-DOM操作 1.1 内容操作 有如下三个方法： html()方法：获取/设置元素的标签体内容（包括其子标签及其内容） text()方法：获取/设置元素的标签体纯文本内容(包括其子标签及其内容） val()方法：获取/.
jquery-css动画
m0_70471255的博客
02-01 57
初学者
jQuery图片切换动画效果
01-19
jq 代码，都是自己写出来的，弄了一下午完成的，初学者，整理以后留着用。 直接上代码： ////// // 2017-2-27 // ////// $(function(){ var num = 0; var divStr = '#imageShowSmallAnchor'; // 移动 div var s...
16jQuery动画效果.docx
05-02
jQuery 提供了多种内置的方法来创建这些动画效果，使得即使对于初学者来说，也能轻松地实现动态的用户体验。 首先，我们来看jQuery的基本动画效果——`show()`、`hide()`和`toggle()`。`show()`方法用于显示隐藏的...
jQuery动画背景滑动切换效果特效代码
03-20
jQuery动画背景滑动切换效果是一种常见的网页交互设计，它能够为用户提供更为生动和吸引人的视觉体验。这个特效主要依赖于jQuery库，一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等...
jquery动画特效大全
05-22
总的来说，"jQuery动画特效大全"涵盖了前端开发中动画设计的方方面面，无论你是初学者还是经验丰富的开发者，都能从中受益。通过研究和实践这些源码，你可以深入理解jQuery动画的工作原理，进而创造出更独特、更吸引...
jQuery掷骰子动画特效
07-24
首先，我们要理解jQuery中的动画效果是如何工作的。jQuery提供了一系列的动画方法，如`fadeIn()`, `fadeOut()`, `slideToggle()`, `animate()`等，这些方法使得开发者能够轻松创建平滑的过渡效果。在这个掷骰子特效...
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
jQuery初学者到高手实战指南
3. **Animating, Scrolling, and Resizing**：介绍了jQuery的动画效果，包括滑动、滚动和大小调整等动态效果的实现，以及如何控制动画速度和行为。 4. **Images and Slideshows**：讲述了如何使用jQuery处理图像和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CC_leather

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值