jQuery 带有动画的jQuery setTimeout
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8157985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery setTimeout with animation
提问by Chris Olson
I have some set CSS that after 2 seconds I want to revert to their defined positions.
我有一些设置 CSS，在 2 秒后我想恢复到它们定义的位置。
I am using this:
我正在使用这个：
setTimeout(function() {
$("div").css("z-index", "");
$("div").css("height", "");
$("div").css("width", "");
$("div").css("marginLeft", "");
$("div").css("marginTop", "");
}, 2000 );
So what this does is basically sends five different divs back to places all over the page after 2 seconds. On load they are doing this:
所以这基本上是在 2 秒后将五个不同的 div 发送回整个页面的位置。在加载时，他们这样做：
$(document).ready(function() {
$("div").css("z-index", "");
$("#tablet,#phone,#television,#web,#social,#fusion").css({
width: "500px",
height: "350px",
marginLeft: "30%",
marginTop: "25px",
}, 750);
});
I was wondering if you guys know how to animate the events after 2 seconds. Right now its just happening fast but I would like it to be an animation back to their initial states.
我想知道你们是否知道如何在 2 秒后为事件设置动画。现在它只是发生得很快，但我希望它是一个回到初始状态的动画。
I have been using this to animate the 5 divs all into one area onclick:
我一直在使用它来将 5 个 div 全部设置为一个区域 onclick：
$("#tablet,#phone,#television,#web,#social,#fusion").animate({
width: "500px",
height: "350px",
marginLeft: "30%",
marginTop: "25px",
}, 750);
Thanks!
谢谢！
回答by Kai Qing
Call me crazy but it looks like you have the answer to your own question here. You clearly already know how ot use jquery animate, so why not use that instead of just redefining the css in your setTimeout?
叫我疯了，但看起来你在这里有你自己问题的答案。您显然已经知道如何使用 jquery animate，那么为什么不使用它，而不仅仅是在您的 setTimeout 中重新定义 css？
setTimeout(function() {
$("#tablet,#phone,#television,#web,#social,#fusion").animate({
width: "0px",
height: "0px",
marginLeft: "0%",
marginTop: "0px",
}, 750);
}, 2000 );
Did I read your question incorrectly? Or is it that you don't want your elements to have a 0px width and height but you want those css declarations to be removed entirely?
我是否错误地阅读了您的问题？还是您不希望元素具有 0px 的宽度和高度，但您希望完全删除这些 css 声明？
EDIT
编辑
Ok, so as per your explanation you want them to go back to their already defined states. I presume you mean BEFORE the onload statement that redefines their position, right? Does this mean that you are operating with the understanding that the previous state is not known and is abstract and you want to know how to fetch that information? Or do you mean very simply that you do know the state you want it to return to and just don't know how to tell it to animate there?
好的，根据您的解释，您希望它们返回到它们已经定义的状态。我想你的意思是在重新定义他们的位置的 onload 语句之前，对吧？这是否意味着您正在理解先前状态未知且是抽象的，并且您想知道如何获取该信息？或者您的意思很简单，您确实知道您希望它返回的状态，只是不知道如何告诉它在那里进行动画处理？
css file:
css文件：
#div{
margin-left:20%;
margin-top:20%;
}
jquery:
查询：
$(document).ready(function(){
$('#div').css({marginTop:'50%', marginLeft:'50%'});
setTimeout(function() {
$("#div").animate({
marginLeft: "20%",
marginTop: "20%",
}, 750);
}, 2000 );
});
So that would be if you knew the desired css to return to. If you did NOT know, you could do something like this:
如果您知道要返回的所需 css，那就是这样。如果你不知道，你可以这样做：
$(document).ready(function(){
var div = new Array();
div.push($('#div').css('margin-top'));
div.push($('#div').css('margin-left'));
$('#div').css({marginTop:'50%', marginLeft:'50%'});
setTimeout(function() {
$("#div").animate({
marginLeft: div[0],
marginTop: div[1],
}, 750);
}, 2000 );
});
回答by Ken Redler
If I understand your question correctly, you have a bunch of elements in "natural" positions on the page. You want to move them to a new position, then later return them to their respective initial positions.
如果我正确理解您的问题，那么您在页面上的“自然”位置中有一堆元素。您想将它们移动到新位置，然后将它们返回到各自的初始位置。
Putting aside the question of animation, one solution would be to capture each element's initial position and other attributes, and store that information on the element itself using data(). In your "reset" function, you could then reference those data to reset each element. So, something like this (untested):
撇开动画问题不谈，一种解决方案是捕获每个元素的初始位置和其他属性，并使用data(). 在您的“重置”功能中，您可以参考这些数据来重置每个元素。所以，像这样（未经测试）：
// in your $(document).ready() handler:
$('div').each( function () {
var original = {
w: $(this).width(),
h: $(this).height(),
o: $(this).offset()
};
$(this).data('orig', original);
});
Each divnow knows where it came from. You then move them around as you wish. When it's time to return them:
div现在每个人都知道它来自哪里。然后，您可以随意移动它们。何时归还它们：
var backToOriginal = function() {
$('div').each( function () {
var $d = $(this).data('orig');
$(this).animate({
'top': $d.o.top,
'left': $d.o.left,
'width': $d.w,
'height': $d.h
});
});
};
setTimeout(backToOriginal, 1000); // animate to original position after 1 sec
Change animation and delays to taste.
改变动画和延迟的味道。
Here's a working example: http://jsfiddle.net/redler/LQyeh/
这是一个工作示例：http: //jsfiddle.net/redler/LQyeh/
Initially the elements are randomly dispersed (in your case, they'd be in their natural positions according to your markup). When you trigger the routine, they're mutated and moved to a single position. After a delay, they smoothly return to their initial position and size.
最初，元素是随机分散的（在您的情况下，它们会根据您的标记处于自然位置）。当您触发例程时，它们会发生变异并移动到一个位置。一段时间后，它们会平稳地恢复到初始位置和大小。
回答by aknatn
In this situation I have relied on the clone method of jQuery. You can hide the original element and use the clone for your animation. To restor the original just destroy the clone and unhide the original.
在这种情况下，我依赖于 jQuery 的 clone 方法。您可以隐藏原始元素并将克隆用于动画。要恢复原件，只需销毁克隆并取消隐藏原件即可。
