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全部动画到一个区域中点击：

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

谢谢！

Answer 1

叫我疯了，但看起来你在这里得到了自己问题的答案。您显然已经知道如何使用jquery动画，那么为什么不使用它而不是仅仅重新定义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

带动画的jQuery setTimeout

3 个答案: