jQuery 效果999动画 延迟

最新推荐文章于 2022-09-21 19:10:20 发布
最新推荐文章于 2022-09-21 19:10:20 发布
阅读量440 收藏
点赞数
分类专栏： jquer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangtangsimada/article/details/77461643
版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表白墙</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
body{
margin: 0 auto;
padding: 0px;
background:#000000;
}
.content{
display: inline-block;
width: 350px;
height: 400px;
}
div>div>div {
display: block;
height: 20px;
}
div>div>div>div {
width: 16px;
height: 16px;
display: inline-block;
float: left;
margin: 2px;
}
div>div.content1>div>div.fl {
background-color:#ff0033;
}
div>div.content2>div>div.fl {
background-color:#ff0033;
}
div>div.content3>div>div.fl {
background-color:#ff0033;
} 
</style>

</head>
<body>

<div style="width:1100px; margin:100px auto;">
<div class="content content1">
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
</div>
<div class="content content2">
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
</div>
<div class="content content3">
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl" style="margin-left: 222px;"></div>
<div class="fl"></div>
</div> 
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left:20px;">
<div class="fl" style="margin-left:262px;"></div>
<div class="fl"></div>
</div>
<div style="margin-left: 20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div> 
</div>
<div style="margin-left:20px;">
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
<div class="fl"></div>
</div>
</div>
</div>

 

<script>
$(function() { //var p = animate() [] 声明一个变量
animate();
function animate() { //调用animate()方法
$('div>div>div>div').each(function() { // each()为每个匹配元素 输出嵌套里div里面的内容 
$(this).css({ //改变它当前的css样式 相对定位 从上往下显示动画 透明度为0
position: 'relative', 
top: '-400px',
opacity: 0 
});

var wait = Math.floor((Math.random() * 3000) + 1); //声明一个变量让它随机 random()
$(this).delay(wait).animate({ //delay() 被选元素的所有函数,未运行设置延迟 设置向下 opacity透明度
top: '10px',
opacity: 1
}, 2000, function() { 
$(this).delay(wait).animate({
top: '0px',
opacity: 0
}, 1000, function() {
$(this).delay(wait).animate({
top: '0px',
opacity: 1
}, 500);
});
});
});
}
});


</script>
</body>
</html>

tangtangsimada
关注
专栏目录
【jQuery】调用delay()方法延时执行动画效果
O(∩_∩)O
12-18 8842
delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为： $(selector).delay(duration) 其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。 例如，当页面中图片动画正在执行时，点击“延时”按钮调用delay()方法推迟2000毫秒后继续执行，如下图所示： 在浏览器中显示的效果：
jQuery图片切换动画效果 处理动画延迟
PorGer333的博客
02-27 1667
jq图片切换动画，处理快速点击动画延迟。
Jquery 动画效果 停止延迟
qhx556的专栏
05-06 962
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                  .imgclass         {                        width: 300px;             height: 300px
56 jQuery-动画停止和延时
LiGuogang
01-03 548
1.效果图 2.HTML代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;56 jQuery-动画停止和延时&lt;/title&gt; &lt;style type="text/css"&gt;
JQuery 修正动画延迟
weixin_30315905的博客
08-13 124
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过stop()修正动画延迟</title> <style type="text/css"> ...
jq延迟的使用
SuperCoooooder的博客
03-08 2110
作为刚接触jq的小白的我来说，一说起延迟首先想到的就是delay()，从字面意思就一目了然，然而用起来缺发现并没有自己想象的那么简单。              delay()可以将队列中等待执行的下一个动画延迟指定的时间后才执行。它常用在队列中的两个jQuery效果函数之间，从而在上一个动画效果执行后延迟下一个动画效果的执行时间。我们可以发现delay()仅用于队列中动画的延迟执行，对于其他的
jQuery文字切换动画效果
06-10
在这个名为"jQuery文字切换动画效果"的项目中，我们重点关注的是如何利用jQuery来创建吸引人的文本动态展示，特别是对于网站口号或广告语的呈现。 首先，`index.html`是网页的主文件，它包含了页面的基本结构和元素...
jQuery图片切换动画效果
10-20
jQuery图片切换动画效果的知识点主要包括了如何使用jQuery实现图片切换动画、如何处理动画过程中出现的延迟问题以及如何优化用户体验。jQuery作为一个功能强大的JavaScript库，其简化了HTML文档遍历、事件处理、动画...
jQuery添加背景动画效果插件
06-24
在实际应用中，开发者可以根据需求选择或组合这些效果，通过调整参数来控制动画的持续时间、速度曲线、延迟等细节。同时，为了增强用户体验，应该确保动画效果不会影响页面性能，避免过度使用导致页面卡顿。 此外，...
jQuery实现动画效果的简单实例
12-09
在本文中，我们将深入探讨如何使用jQuery来实现动画效果，以"jQuery实现动画效果的...了解这些基础知识后，你可以进一步探索jQuery的其他动画选项，如缓动函数、延迟和队列控制，以创建更加精细和个性化的动画效果。
jquery延时载入动画焦点图- 有点类似视差动画
肖肖肖丽珠的博客
06-23 1820
在这里我用了一个插件jquery.DB_tabMotionBanner.min.js。 参考：http://www.jqueryfuns.com/resource/1424 http://www.xwcms.net/js/jdt/76222.html 首先引入js文件   注意这里是1.8.3版本的，其他版本可能就不适用啦。 页面
原生js和jq的延时提醒框 （QQ头像为例）
weixin_33892359的博客
03-07 152
首先说明一下效果：鼠标放到头像上面左边会显示一块个人资料框，离开头像后过一小段时间个人资料信息消失，离开头像后如果鼠标放在个人资料框上面则个人资料框不消失； html代码：一个id为head的标签和一个id为left的标签 这两个就足以完成下来的效果； #head相当于头像；#left相当于个人资料框(一开始是隐藏的 display:none;)；css样式就不写了，直接写js 原生js： 首先获...
JQ动画效果
不忘初心
06-27 2800
一看到动画效果我就激动的不行，很多人学JS可能都是为了特效，duang~duang~，好啦，下面我就记录下我在李炎恢老师视频中学的动画，在这里记下笔记 首先我们常用的动画有，显示与隐藏，滑动与卷动，淡入与，自定义动画等。在下面还会记下方法如列队动画方法，那就开始咯首先是几个基本动画显示和隐藏//.show()，可以传参控制速度等有slow nromal fast或者是毫秒数，还可以传入回掉函数 $
jQuery中的动画
前端萌新一枚
09-27 1349
jQery中的动画 一、show()方法和hide()方法 (一). show()方法和hide()方法 (二). show()方法和hide()方法让元素动起来 二、fadeIn()方法和fadeOut()方法 三、slideUp()方法和slideDown()方法 四、自定义动画方法animate() (一). 自定义简单动画 (二). 累加、累减动画 (三). 多重动画 (四). 综...
jQuery动画（jQuery预制动画，jQuery自定义动画，jQuery停止动画和延迟动画）
weixin_64037609的博客
09-21 727
jQuery动画（jQuery预制动画，jQuery自定义动画，jQuery停止动画和延迟动画）
jQuery动画连续触发、滞后反复执行解决办法
xiao_yu_liu的博客
02-13 1756
li{ background-image: url(images/case_back_03.png); background-repeat: no-repeat; width: 200px; height: 200px; background-size: 100%; } $("li").hover(function(){ $(this).st
详解JQuery动画
z1808232384的博客
04-19 892
        我这是我在逆战班学习js的第六周，今天让我来给大家解释一下jQuery框架中的jQuery动画的应用及方式         jQuery动画可以分为内置动画和自定义动画，下面让我们用代码来说明它的用法 一、jQuery动画的...
jQuery（五）--自定义动画、动画
小白小白从不日别的博客
05-02 3386
主要介绍了 jQuery 中的动画
jQuery延迟函数 让DIV延时几秒后消失或显示
热门推荐
信念堤岸
02-25 2万+
在手机端html的长按弹出删除功能时，遇到一个需求就是要给touchend事件添加一个延迟时间。今天分享的这个就是解决当初方法的一个延迟例子。 第一种方法：最常用的方法。好处是在这个延迟时间内自定义一些复杂的操作 $(function () {     var timeout=setTimeout(function () {         $("divid").show();
jQuery动画入门：轻松创建网页动态效果
此外，文档可能还涵盖了其他jQuery动画相关的函数，如`slideToggle()`（滑动切换）、`animate()`（自定义动画）以及`.delay()`（延迟执行），这些函数可以帮助开发者创建各种复杂的动画效果。 这份文档是一份全面的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值