关于jquery的循环动画

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

菜鸟教程的动画部分，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
</head>

<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

突然想到能不能循环动画，jquery本身就是基于js的库，不妨对于函数使用递归，即可实现循环

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
function show(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
    show();
}
$(document).ready(function(){
  $("button").click(show);
});
</script> 
</head>

<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

另外注意 var div=$(“div”) 这个写法，变量 = 选择器语句，即为选择到的对象

还有一点，当jquery中写为
$(document).ready(function(){

$(“button”).click(show);
});
这样时，会点击之后触发动画；
若写为

$(document).ready(function(){

$(“button”).click(show());
});
这样，则页面加载之后就会自己动

twat
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery动画，for循环，each循环
weixin_49757916的博客
06-08 391
jQuery的各种方法 一：jQuery的each方法： for循环和each循环的对比 最简单的循环语句： 1
jQuery动画和循环
peichaohang的博客
01-14 756
jQuery动画 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery动画&lt;/title&gt; &lt;style type="text/css"&gt; .bo
jQuery实现动画循环的三种解决方案
热门推荐
泠泉石上的博客
10-05 2万+
用了jQuery的动画以后确实感觉少了好多代码。。。然而突发奇想怎么实现动画循环呢？ 百度了一下，看到知乎一位大神的代码  https://www.zhihu.com/question/27598169 var direction='right'; (function() { var css = { 'left': '10%' }; if(direction === '
jQuery无缝循环开源多元素动画轮播jquery.slides插件
weixin_34238642的博客
04-14 128
详细内容请点击 初始化插件： 一款基于jQuery无缝轮播图插件,支持图内元素动画，可以自定义动画类型$(".slideInner").slide({slideContainer: $('.slideInner a'),effect: 'easeOutCirc',//动画类型autoRunTime: 5000,//自动轮播时间slideSpeed: 1000,//速度na...
Jquery 动画-无限循环滚动
weixin_34198583的博客
01-20 762
实现功能： 1、当点击按钮的时，元素切换，切换到最后一个时，会自动切换回第一个，然后继续循环切换！ Jquery代码： $(document).ready(function(){ $("#bb").click(function(){ $(".scroll ul").animate({ marginRight:"-25p...
jQuery循环动画与获取组件尺寸的方法
10-24
总的来说，jQuery循环动画的实现涉及到`animate()`方法的使用，以及通过`setInterval()`和`clearInterval()`控制动画的执行循环。获取组件尺寸则依赖于`width()`和`height()`方法。通过理解这些基础概念和技巧，...
jQuery多重图片无限循环动画特效
12-12
jwscrollloop是一款非常实用的jQuery多图片无限循环动画特效插件。该插件可以单独对某张图片进行动画控制，如控制运动速度，方向，起点和终点等，将各种图片动画元素组合起来就可以组成非常完美的动画场景。
jQuery图片循环轮播代码
06-09
**jQuery图片循环轮播代码详解** 在网页设计中，图片轮播是一种常见的功能，用于展示一组图片并自动或手动切换，以吸引用户注意力并提供更好的用户体验。jQuery库因其丰富的插件和简洁的API，成为实现这种功能的...
jQuery多重图片无限循环动画效果特效代码
03-20
在"jQuery多重图片无限循环动画效果特效代码"这个项目中，我们关注的是如何利用jQuery来创建一个动态的、多图片的无限循环动画效果。 首先，我们需要理解jQuery中的动画效果是如何实现的。jQuery提供了`.animate()`...
jQuery动画
weiweiweb888的博客
12-15 605
jQuery动画
jQuery-动画停顿循环执行
qq_39111074的博客
01-24 739
一个动画效果，执行完后，停顿一段时间，然后又开始执行，重复循环 步骤1： @keyframes先定义好动画： @-webkit-keyframes diamond { 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes diamond { 50% { -webkit-transform: translateY(-10px); transfo
原 jQuery动画和循环
weixin_43993443的博客
01-15 94
jQuery动画 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 jQuery循环 jQuery循环 ...
web JQ 动画与循环
廷益_飞鸟的博客
11-24 308
动画的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画的展示</title> <style> #ball { .
jquery animate动画实现循环执行
比音的博客
03-24 1万+
设置好动画animate的每一步后，可以用用setTimeout实现，setTimeout( ) 方法用于在指定的毫秒数后调用函数或计算表达式。 $(document).ready(ab () ); function ab() { $(".ggys1").animate({opacity:0},2000,
jQuery成功之路——jQuery动画效果和遍历效果概述
最新发布
weixin_62458944的博客
09-04 311
jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。
jquery动画循环播放
dragoo1的专栏
12-04 5027
环境：chrome 43.0.2357.132 m div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:60px; background:green; display:none; } div.newcolor { background:blue;
设有定时器的jQuery动画循环播放
baidu_33548663的博客
07-19 1990
当我们需要播放多个jQuery动画时，且需要循环播放多次，但是循环内又有类似setTimeout的函数时， 我们发现for，while之类的函数不能使用。 这时候我们就可以把动画封装成一个函数来实现。具体如下： 1.html &lt;div class="img-wrap jp-pc-wrap"&gt; &lt;div class="opa" style="opacity: 0...
jQuery动画连续触发、滞后反复执行解决办法
oxgos的博客
04-03 3077
在做一个鼠标进出图片,遮罩层上下移动时,遇见的问题(如图所示:): 只要用鼠标不断进出图片,因动画未执行完成就触发下一个事件,使动画效果滞后和反复执行,效果非常不佳. 解决办法如下: 利用jQuery的stop()方法.如下图: $(".masked").mouseover(function(){ $(".mask").stop().animate({ "top":"0px
jquery animate 循环动画
03-16
要实现循环动画，可以在 animate 函数执行完后使用 setTimeout 函数或 setInterval 函数再次调用 animate 函数。 例如，以下代码将循环改变某个元素的宽度: ``` function animateLoop() { $("#some-element")....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值