javascript - Moving an element back to its original position after animation, jQuery - Stack Overflow

admin管理员组

文章数量:1421749

I'm struggling with trying to get this piece of code working properly. I'm moving an element with

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

Which works just great, but I need to reset it back to the original position before the animation, once the animation is plete so that it will animate again next time.

Any help on this would be greatly appreciated.

        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 - /

I'm struggling with trying to get this piece of code working properly. I'm moving an element with

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

Which works just great, but I need to reset it back to the original position before the animation, once the animation is plete so that it will animate again next time.

Any help on this would be greatly appreciated.

        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/zalun/E4mz9/

• javascript
• jquery

Share Improve this question Follow edited Feb 9, 2012 at 18:34 David asked Feb 9, 2012 at 17:54 DavidDavid 36.5k1414 gold badges5151 silver badges8181 bronze badges 4

• 1 save its position before the animation – Ibu Commented Feb 9, 2012 at 17:55
• Example of what i'm doing been added, but not working at the moment. – David Commented Feb 9, 2012 at 18:02
• Could you post an example code on jsfiddle? – Koes Bong Commented Feb 9, 2012 at 18:10
• jsfiddle's read-only, at the moment – Timothy Aaron Commented Feb 9, 2012 at 18:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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

});

What I would do is not use jQuery - I would use plain JavaScript, like this:

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

Things are a lot easier in plain JS ;)

just writing code off my mind, might not execute, but you get the idea

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

本文标签： javascriptMoving an element back to its original position after animationJQueryStack Overflow