CODEWITHSUNDEEP
javascriptjquery
David
David

Reputation: 36354

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

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 complete 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.net/zalun/E4mz9/

Upvotes: 1

Views: 11339

Answers (3)

Timothy Aaron
Timothy Aaron

Reputation: 3078

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

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

});

Upvotes: 2

James Lin
James Lin

Reputation: 26538

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

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

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

Upvotes: 0

Related Questions