jQuery setTimeout动画

我有一些设置的CSS，2秒后我想恢复到他们定义的位置。jQuery setTimeout动画

我使用这个：

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

那么，这样做基本上是将五种不同的div回地遍2秒后的页面。在负载他们正在这样做：

$(document).ready(function() { 
     $("div").css("z-index", ""); 
     $("#tablet,#phone,#television,#web,#social,#fusion").css({ 
      width: "500px", 
      height: "350px", 
      marginLeft: "30%", 
      marginTop: "25px", 
     }, 750); 
});

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

我一直在使用这一切到一个区域的onclick动画5个格：

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

谢谢！

来源

2011-11-16 Chris Olson

那你的setTimeout不工作？你有没有试过jQuery的延迟（）？ [延迟documentaion]（http://api.jquery.com/delay/） – aknatn

叫我疯了，但它看起来像你在这里有你自己的问题的答案。你显然已经知道如何使用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); 
});

来源

2011-11-16 20:40:54

不，我需要他们回到他们已经定义的状态。不是0的。例如，在我的CSS中，我定义了以下内容：#television {width：20％;宽度：20％; height：350px; z-index：-3; position：absolute; margin-left：10％; margin-top：50px; }和负载上，我有它去定义的宽度：“500px”，高度：“350px”， marginLeft：“30％”， marginTop：“25px”，我用“”告诉他们回到他们的信号状态。这很难解释。 –

我不认为“”会让他们回到原来的状态。这表示擦除属性值。如果它看起来像你想要的，它可能是偶然的。没关系，尽管 - 我会修改我的答案，以更深入地询问...... –

.css“”告诉他们回到原来的状态。我想知道是否有类似的.animate解决方案 –

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

Clone Documentation

来源

2011-11-16 20:41:56 aknatn

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

抛开动画的问题，一种解决方案是捕获每个元素的初始位置和其他属性，并使用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/

最初的元素是随机分散（在你的情况，他们会根据您的标记在它们的自然位置）。当你触发例程时，它们会发生变异并移动到一个位置。耽搁之后，他们顺利地回到原来的位置和大小。

来源

2011-11-16 21:19:34

jQuery setTimeout动画

回答

相关问题