个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
26
4
我希望使用 jQuery 使文本按顺序淡入。
这就是我想要做的。
Head -> 0.5s wait -> Body -> 0.5s wait -> Foot -> 0.5s ->Head1 ->... ->
body3 -> 0.5s wait -> Foot2
这是我的代码
$(document).ready(function() {
for (var $i = 1; $i <= 3; $i++) {
show($i);
setTimeout(function() {}, 3000);
$('.group-a .target' + $i).removeClass('acitve');
}
});
function show($index) {
var target;
setTimeout(function() {
target = $('.group-a .target' + $index).addClass('active');
}, 1000);
}.group-a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.group-a .target1>* {
transition: transform 1s, opacity 1s;
transform: translateY(100%);
opacity: 0;
}
.group-a .target2>* {
transition: transform 1s, opacity 1s;
transform: translateY(100%);
opacity: 0;
}
.group-a .target3>* {
transition: transform 1s, opacity 1s;
transform: translateY(100%);
opacity: 0;
}
.group-a .target1 .part-1 {
transition-delay: 0.5s
}
.group-a .target1 .part-2 {
transition-delay: 1s;
}
.group-a .target1 .part-3 {
transition-delay: 1.5s;
}
.group-a .target1.active>* {
transform: translateY(0);
opacity: 1;
}
.group-a .target2.active>* {
transform: translateY(0);
opacity: 1;
}
.group-a .target3.active>* {
transform: translateY(0);
opacity: 1;
}
.group-a .target2 .part-1 {
transition-delay: 0.5s
}
.group-a .target2 .part-2 {
transition-delay: 1s;
}
.group-a .target2 .part-3 {
transition-delay: 1.5s;
}
.group-a .target3 .part-1 {
transition-delay: 0.5s
}
.group-a .target3 .part-2 {
transition-delay: 1s;
}
.group-a .target3 .part-3 {
transition-delay: 1.5s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="group-a">
<div class="target1">
<div class="part-1">Head</div>
<div class="part-2">Body</div>
<div class="part-3">Foot</div>
</div>
<div class="target2">
<div class="part-1">Head1</div>
<div class="part-2">Body1</div>
<div class="part-3">Foot1</div>
</div>
<div class="target3">
<div class="part-1">Head2</div>
<div class="part-2">Body2</div>
<div class="part-3">Foot2</div>
</div>
</div>
</body>
</html>最佳答案
您在 css 中编写了太多不需要的代码。向所有目标 div 添加相同的类以减少代码并使用 each() jQuery 在每个元素和窗口中添加类 setTimeout() 延迟
$(".target").each(function(i) {
setTimeout(function() {
$('.group-a .target').eq(i).addClass('active');
}, i * 3000);
}).group-a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.group-a .target>* {
transition: transform 1s, opacity 1s;
transform: translateY(100%);
opacity: 0;
}
.group-a .target .part-1 {
transition-delay: 0.5s
}
.group-a .target .part-2 {
transition-delay: 1s;
}
.group-a .target .part-3 {
transition-delay: 1.5s;
}
.group-a .target.active>* {
transform: translateY(0);
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="group-a">
<div class="target1 target">
<div class="part-1">Head</div>
<div class="part-2">Body</div>
<div class="part-3">Foot</div>
</div>
<div class="target2 target">
<div class="part-1">Head1</div>
<div class="part-2">Body1</div>
<div class="part-3">Foot1</div>
</div>
<div class="target3 target">
<div class="part-1">Head2</div>
<div class="part-2">Body2</div>
<div class="part-3">Foot2</div>
</div>
</div>关于javascript - 我希望文本按顺序出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49504803/
26
4
0
对于我不断地用刽子手问题来打扰这个论坛，我深表歉意。我希望很快就能完成这件事。确实在这方面一直在努力。这是到目前为止我的代码: #include #include #include #defin
这篇文章是 this one 的延续. 我试图了解我是否是唯一一个错过并需要 .NET 泛型类型继承其泛型参数类型之一的能力的人。 面临的挑战是收集支持此功能的令人信服的理由，或者，要知道没有。 我给
我正在使用下面的代码设计一个 3 小时的 JavaScript 倒计时 var count = 10800; var counter = setInterval(timer, 1000); //1
我正在处理验证并放置一个 html 模式属性，并希望在不点击保存/提交按钮的情况下查看错误消息。当我在字段外单击时，它应该根据我的模式条件进行验证。 这是我的代码: Extra Credit Da
我有一个像这样的 mysql 表结构: id int primary key name varchar start_time float 数据可能是这样的: id name
我试图在桌面上保留一张带有描述的图片，然后在移动设备上希望图片在左边，描述在右边……更多的是尽可能让所有内容都在首屏。 我希望桌面上的 DIV 是: 一个一个 BBB 但是在手机上: A B A B
我通过 Stackoverflow 进行了搜索，发现很多人试图避免 CSS 列中的重叠，但实际上我被要求让文本和图像重叠。 更新: 更好的图像解释了我被要求做的事情，以及指向我正在使用的代码的链接。谢
我在我的框架中设置了几个协议(protocol)来处理资源。在其中一个协议(protocol)中，我设置了一个扩展来为 decode 函数提供默认实现。显示代码和发生的情况更简单(请参阅对 fatal
我想同时加载，或者在上面的图像之后立即加载。它会在图像和标题 div 在预加载器内旋转之前不断加载 - 不好!这是 HTML: ✕ Various inv
我目前正在开发一个小游戏。我使用 getKeyCode 来移动我的角色，但问题是我不希望你在按住按钮的情况下能够继续移动。无论如何，我是否可以使用 getKeyCode 仅在第一次单击时注册，然后在释
我需要设置 width 或 max-width 才能让 margin:auto 工作，对吗？ Like in this jsFiddle . 问题是，段落宽度等于 max-width，因此文本 blo
您好，我在同一页面上有一个表单和一个 Paypal 订阅按钮。在重定向到 Paypal 付款之前，我想在单击提交表单(通过电子邮件发送给我)时订阅按钮。 > >
我想让用户在点击一个文本字段时感觉就像我们点击一个按钮，在释放按钮后它会在很短的时间内变成橙色，然后闪烁并再次变成它的第一种颜色。当我点击它时它运行良好但没有出现颜色闪烁。 布局文件 主要 Ac
我怎样才能让我的 MediaPlayer 继续播放，即使在手机锁定和屏幕关闭的情况下，我认为它可能必须做一些使其成为服务但不确定的事情。如果是这样，我该如何将其更改为服务，或者是否有更快更简单的修复方
有人可以帮助我理解内存泄漏的概念以及特定数据结构如何促进/防止它(例如链表、数组等)。前段时间我被两个不同的人教过两次——由于教学方法的不同，这让我有点困惑。 最佳答案 维基百科有一个 good de
我希望 HTML 表单在提交后不执行任何操作。 action="" 不好，因为它会导致页面重新加载。 基本上，我希望在按下按钮或有人在输入数据后点击 Enter 时调用 Ajax 函数。是的，我可以删
我正在执行一个程序 say A from another，首先是 fork-ing，然后是 execve()。现在的问题是我希望 A 使用我通常使用 LD_PRELOAD 来完成的库。我如何在 exe
我目前正在为我们公司测试 Autofac。 我们希望有以下规则: 如果接口(interface)只实现了一次，则使用 builder.RegisterAssemblyTypes 自动添加它(见下文)。
正如 Scott Meyers 和 Andrei Alexandrescu 在 this 中概述的那样文章 简单尝试实现双重检查锁定实现在 C++ 中特别是不安全的，并且通常在不使用内存屏障的多处理器
目前我有一些代码可以在点击时改变图像，但这段代码是在一个 php HTML 循环中所以事情变得棘手，点击一个开关会使每个故事的开关都激活，因为它是基于 CSS 运行的.如何让它们独立交换？ $("
我是一名优秀的程序员,十分优秀！