动画后将元素移回其原始位置,jQuery

Moving an element back to its original position after animation, jQuery

本文关键字:原始 位置 jQuery 元素 动画      更新时间:2023-09-26

我正在努力让这段代码正常工作。我正在用移动一个元素

$("#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 Fiddle-http://jsfiddle.net/zalun/E4mz9/

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

我不想使用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中,事情要容易得多;)

只是在脑子里写代码,可能不会执行,但你会想到

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