- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我想制作一个 html div 以快速向右移动(例如不到 1 秒)并消失。然后1秒后再次直接出现在这个过程最开始div的位置。此过程将由单击按钮并重复 10 次触发。
我试图在 CSS 中使用过渡属性来实现这一点,但是 the result这不是我想要的。 div会直接消失,而不是向右移动后消失。
难道我想做的事情用CSS是做不到的?如果是这样,我应该使用什么?
CSS代码:
#box1 {
width: 100px;
height: 100px;
background: red;
-webkit-transition-property: left, right; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-property: left, right;
transition-duration: 2s;
position:absolute;
left: 0;
}
#box1:hover {
transition-delay:1s;
left: 100px;
transition-delay:1s;
opacity:0;
}
Javascript 代码:
var elem = document.getElementById("box1");
$('#b').click(function(){
var i = 0;
while (i < 10){
setTimeout(function(){
elem.setAttribute("style","left: 1000px;");
}, 500);
setTimeout(function(){
elem.setAttribute("style"," opacity: 0;");
}, 500);
i ++;
}
})
最佳答案
您可以通过多种方式实现这一目标:
1-使用 transition 和 css jQuery 方法:
//changing the style of the box using css method of jQuery
var animationDuration = 800;
var animationRepetition = 10;
//this array will be used to clear timeouts if user click while animation still going
var timeoutIds = [];
$("#css_method").click(function() {
for (var i = 0; i < timeoutIds.length; i++) {
clearTimeout(timeoutIds[i]);
}
timeoutIds = [];
for (var i = 0; i < animationRepetition; i++) {
var index = i;
var id1 = setTimeout(function() {
$("#box1").addClass("left-opacity-transition").css({
left: 500,
opacity: 0
});
}, 2 * index * animationDuration)
var id2 = setTimeout(function() {
$("#box1").removeClass("left-opacity-transition").css({
left: 0,
opacity: 1
});
}, ((2 * index) + 1) * animationDuration);
timeoutIds.push(id1, id2);
}
});
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 0;
}
button {
margin-top: 30px;
}
.left-opacity-transition {
-webkit-transition-property: left, opacity;
/* Safari */
-webkit-transition-duration: .8s;
/* Safari */
transition-property: left, opacity;
transition-duration: .8s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="box1"></div>
<button id="css_method" type='button'>use css method</button>
2-使用动画 jQuery 方法:
//using the animate method of jQuery you can remove the transition from style
var animationDuration = 800;
var animationRepetition = 10;
$("#animate_method").click(function() {
var $box1 = $("#box1");
$box1.finish();
for (var i = 0; i < animationRepetition; i++) {
$box1.animate({
left: 500,
opacity: 0
}, 800, function() {
$box1.css({
left: 0,
opacity: 1
});
});
}
});
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
button {
margin-top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="box1" class="fade-in-left"></div>
<button id="animate_method" type='button'>use animate method</button>
3-在 css 类中使用翻译:
//using the translateX you also can change the element position in X axis
var animationDuration = 800;
var animationRepetition = 10;
//this array will be used to clear timeouts if user click while animation still going
var timeoutIds = [];
$("#translate_button").click(function() {
for (var i = 0; i < timeoutIds.length; i++) {
clearTimeout(timeoutIds[i]);
}
timeoutIds = [];
for (var i = 0; i < animationRepetition; i++) {
var index = i;
var id1 = setTimeout(function() {
$("#box1").addClass("transform-opacity-transition translate-fade-left");
}, 2 * index * animationDuration);
var id2 = setTimeout(function() {
$("#box1").removeClass("transform-opacity-transition translate-fade-left");
}, ((2 * index) + 1) * animationDuration);
timeoutIds.push(id1, id2);
}
});
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
button {
position: absolute;
top: 150px;
}
.translate-fade-left {
transform: translateX(500px);
-webkit-transform: translateX(500px);
opacity: 0;
}
.transform-opacity-transition {
-webkit-transition-property: transform, opacity;
/* Safari */
-webkit-transition-duration: .8s;
/* Safari */
transition-property: transform, opacity;
transition-duration: .8s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="box1"></div>
<button id="translate_button" type='button'>use translate</button>
关于javascript - 如何使 html div 快速向右移动(不到 1 秒)并消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52673411/
如何更改循环中变量的名称?比如 number1 、 number2 、 number3 、 number4 ? var array = [2,4,6,8] func ap ( number1: Int
我想设置 View 的背景颜色并在一定延迟后将其更改为另一种颜色。这是我的尝试方式: print("setting color 1") self.view.backgroundColor = UICo
我在使用 express-session 时遇到问题。 session 数据不会在请求之间持续存在。 正如您在下面的代码中看到的那样,/join 路由设置了一些 session 属性,但是当 /sur
我试图从叶渲染器获得一个非常简单的结果,用于快速 Steam 的 for 循环。 我正在上传叶文件 HTML,因为它不接受此处格式正确的代码 - 下面的pizza.swift代码- import
你们中有人有什么好的链接可以与我分享吗?我正在寻找一个 FAST 程序员编辑器,它可以非常快速地打开包含超过 100, 000 行代码的文件?我目前正在使用记事本自动取款机,打开一个 29000 行长
我现在正在处理眼动追踪数据,因此拥有一个巨大的数据集(想想数百万行),因此希望有一种快速的方法来完成此任务。这是它的简化版本。 数据告诉您眼睛在每个时间点正在查看的位置以及我们正在查看的每个文件。 X
我是新手,想为计时器或其他设备选择提示音。 如何打开此列表,以选择其中一种声音? Alert sound list 最佳答案 您将无法在应用中使用系统声音。 但是,您可以包括自己的声音文件,并将其显示
我编写了以下代码来构建具有顺序字符串的数组。 它的工作方式与我预期的一样,但我希望它能更快地运行。有没有更有效的方法在PowerShell中产生我想要的结果? 我是PowerShell的新手,非常感谢
我有一个包含一些非唯一行的矩阵,例如: x 尝试 y <- rle(apply(x, 1, paste, collapse = " ")) # y$lengths is the vector con
我的函数“keyboardWillShown”有问题。所以我想要的是菜单打开时,菜单正好出现在键盘上方。它可以在Iphone 8 plus,8、7、6上完美运行。但是,当我在模拟器上运行Iphone
我正在尝试通过Swift 5中的HTTP get方法从API提取数据。它在启动时成功加载了数据,但是当我刷新页面时,它说“索引超出范围”,这是因为数据是不再会在我的日志中读取,因此索引中没有任何内容。
我想做什么: 从我的数据库中获取时间戳并将其转换为用户的时区。 我的代码: let tryItNow = "\(model.timestampName)" let format = D
给定字体名称和字体大小,如何查找字符串的宽度(CGFloat)? (目标是将UIView的宽度设置为足以容纳字符串的宽度。) 我有两个字符串:一个重复“1”,重复36次,另一个重复“M”,重复36次。
我正在尝试解析此JSON ["Items": ( { AccountBalance = 0; AlphabetType = 3; Description = "\U0631\U
我在UINavigationBar内放置了一个UILabel。 我想根据navigationBar的高度增加该标签的字体大小。当navigationBar很大时,我希望字体大小更大;当滚动并缩小nav
我想将用户输入限制为仅有效数字并使用以下内容: func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, rep
目前我有一个包含超过 100.000 张图像的数据库,它们大小不一或类似,但我想为我的公司制作以下内容: 我插入/上传一张图片,系统返回最有可能相同的图片。我不知道使用什么算法,但它需要快速。我可以预
在我的 swift 项目中,我有一个按钮,我想在标签上打印按下该按钮的时间。 如何解决这个问题? 最佳答案 添加到DHEERAJ的答案中,您只需在func press(sender: UIButton
我必须发表评论,尝试在解析中导入数组。然而,有一个问题。 当我尝试从 Parse 加载数组时,我的输出是 ("Blah","Blah","Blah")这是一个元组...而不是一个数组 TT... 如何
我的应用程序有一个名为 MyDevice 的类,我用它来与硬件通信。该硬件是可选的,实例变量也是可选的: var theDevice:MyDevice = nil 然后,在应用程序中,我必须初始化设备
我是一名优秀的程序员,十分优秀!