带有动画的jQuery setTimeout

Question

我有一些设置的 CSS，我想在 2 秒后恢复到它们定义的位置。

我正在使用这个：

setTimeout(function() {
        $("div").css("z-index", "");
        $("div").css("height", "");
        $("div").css("width", "");
        $("div").css("marginLeft", "");
        $("div").css("marginTop", "");
}, 2000 );

所以这基本上是在 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);
});

我想知道你们是否知道如何在 2 秒后为事件设置动画。现在它发生得很快，但我希望它是一个回到初始状态的动画。

我一直在使用它来将 5 个 div 动画化到一个区域 onclick：

$("#tablet,#phone,#television,#web,#social,#fusion").animate({
            width: "500px",
            height: "350px",
            marginLeft: "30%",
            marginTop: "25px",
        }, 750);

谢谢！

Answer 1

说我疯了，但看起来你在这里找到了自己问题的答案。 您显然已经知道如何使用 jquery animate，那么为什么不使用它而只是在 setTimeout 中重新定义 css 呢？

setTimeout(function() {
        $("#tablet,#phone,#television,#web,#social,#fusion").animate({
            width: "0px",
            height: "0px",
            marginLeft: "0%",
            marginTop: "0px",
        }, 750);
}, 2000 );

我读错了你的问题吗？还是您不希望元素的宽度和高度为 0px，但希望完全删除这些 css 声明？

编辑

好的，所以根据您的解释，您希望他们回到他们已经定义的状态。我想你的意思是在重新定义他们的立场的 onload 声明之前，对吧？这是否意味着您在理解之前的状态是未知的并且是抽象的并且您想知道如何获取该信息的情况下进行操作？或者您的意思很简单，您确实知道您希望它返回的状态，只是不知道如何告诉它在那里进行动画处理？

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 );
});

如果您知道要返回的所需 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 );
});

Answer 2

如果我正确理解了您的问题，那么您在页面上的“自然”位置有一堆元素。您想将它们移动到一个新位置，然后再将它们返回到各自的初始位置。

撇开动画问题不谈，一种解决方案是捕获每个元素的初始位置和其他属性，并使用data() 将这些信息存储在元素本身上。在您的“重置”功能中，您可以参考这些数据来重置每个元素。所以，像这样的东西（未经测试）：

// in your $(document).ready() handler:
$('div').each( function () {
  var original = {
    w: $(this).width(),
    h: $(this).height(),
    o: $(this).offset()
  };
  $(this).data('orig', original);
});

现在每个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

根据口味更改动画和延迟。

这是一个工作示例：http://jsfiddle.net/redler/LQyeh/

最初，元素是随机分散的（在您的情况下，它们会根据您的标记处于其自然位置）。当您触发例程时，它们会发生变异并移动到一个位置。延迟一段时间后，它们会顺利恢复到初始位置和大小。

Answer 3

在这种情况下，我依赖于 jQuery 的 clone 方法。您可以隐藏原始元素并将克隆用于动画。要恢复原件，只需销毁克隆并取消隐藏原件即可。

Clone Documentation