动画后将元素移回其原始位置，jQuery答案

【问题标题】：Moving an element back to its original position after animation, jQuery动画后将元素移回其原始位置，jQuery
【发布时间】：2012-02-09 17:54:10
【问题描述】：

我正在努力让这段代码正常工作。我正在用

移动一个元素

$("#element").hide("slide", { direction: "right" }, 200);

效果很好，但我需要在动画完成后将其重置回动画之前的原始位置，以便下次再次动画。

对此的任何帮助将不胜感激。

        var position = jQuery("#"+that.currentIconSlide).find('.slideInner').position();

        jQuery("#"+that.currentIconSlide).find(".slideInner").hide("slide", { direction: "right" }, 200, function(){
            jQuery(this).css({"left":position.left,"top":position.top}).parent().hide();    
        });

JS 小提琴 - http://jsfiddle.net/zalun/E4mz9/

【问题讨论】：

保存动画前的位置
添加了我正在做的示例，但目前无法使用。
你能在 jsfiddle.net 上发布一个示例代码吗？
jsfiddle 的只读，目前

标签： javascript jquery

【解决方案1】：

$("#element").animate({'left':'300','opacity':'0'}, 2000, function(){

    $(this).css({'left':'0','opacity':'1'});

});

【讨论】：

为帮助干杯，jQuery("#"+that.currentIconSlide).animate({'right':'300','opacity':'0'},2000, function(){ $(this).css({'left':'0','opacity':'1'}); });
似乎一直在向我踢这个 - Uncaught ReferenceError: animate is not defined
如果你使用的是jQuery()而不是$()，别忘了把内部的$(this).css...改成jQuery(this).css...

【解决方案2】：

我不会使用 jQuery - 我会使用纯 JavaScript，如下所示：

elem.style.position = "relative";
// animate by adjusting `left` and `top` relative to the start position
elem.style.position = "static"; // jump back to start position.

在纯 JS 中事情要容易得多；）

【讨论】：

【解决方案3】：

只是在脑海中写下代码，可能无法执行，但你明白了

var position = jQuery("#"+that.currentIconSlide).find('.slideInner').position();

function slide(){
    var original_position = 0;
        jQuery("#"+that.currentIconSlide).find(".slideInner").hide("slide", { direction: "right" }, 200, function(){
            jQuery(this).css({"left":position.left,"top":position.top}).parent().hide(); //? what is this for?
            jQuery(this).css("left":original_position); //set back to original left
            slide(); //run again
        });
}

【讨论】：