CODEWITHSUNDEEP
jquerycssjquery-animate
Chris Olson
Chris Olson

Reputation: 1041

jQuery setTimeout with animation

I have some set CSS that after 2 seconds I want to revert to their defined positions.

I am using this: 

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

So what this does is basically sends five different divs back to places all over the page after 2 seconds. On load they are doing this: 

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

I was wondering if you guys know how to animate the events after 2 seconds. Right now its just happening fast but I would like it to be an animation back to their initial states.

I have been using this to animate the 5 divs all into one area onclick:

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

Thanks!

Upvotes: 2

Views: 26860

Answers (3)

Ken Redler
Ken Redler

Reputation: 23943

If I understand your question correctly, you have a bunch of elements in "natural" positions on the page. You want to move them to a new position, then later return them to their respective initial positions.

Putting aside the question of animation, one solution would be to capture each element's initial position and other attributes, and store that information on the element itself using data(). In your "reset" function, you could then reference those data to reset each element. So, something like this (untested):

// in your $(document).ready() handler:
$('div').each( function () {
  var original = {
    w: $(this).width(),
    h: $(this).height(),
    o: $(this).offset()
  };
  $(this).data('orig', original);
});

Each div now knows where it came from. You then move them around as you wish. When it's time to return them:

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

Change animation and delays to taste.

Here's a working example: http://jsfiddle.net/redler/LQyeh/

Initially the elements are randomly dispersed (in your case, they'd be in their natural positions according to your markup). When you trigger the routine, they're mutated and moved to a single position. After a delay, they smoothly return to their initial position and size.

Upvotes: 1

Kai Qing
Kai Qing

Reputation: 18833

Call me crazy but it looks like you have the answer to your own question here. You clearly already know how ot use jquery animate, so why not use that instead of just redefining the css in your setTimeout?

setTimeout(function() {
        $("#tablet,#phone,#television,#web,#social,#fusion").animate({
            width: "0px",
            height: "0px",
            marginLeft: "0%",
            marginTop: "0px",
        }, 750);
}, 2000 );

Did I read your question incorrectly? Or is it that you don't want your elements to have a 0px width and height but you want those css declarations to be removed entirely?

EDIT

Ok, so as per your explanation you want them to go back to their already defined states. I presume you mean BEFORE the onload statement that redefines their position, right? Does this mean that you are operating with the understanding that the previous state is not known and is abstract and you want to know how to fetch that information? Or do you mean very simply that you do know the state you want it to return to and just don't know how to tell it to animate there?

css file:

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

So that would be if you knew the desired css to return to. If you did NOT know, you could do something like this:

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

Upvotes: 1

aknatn
aknatn

Reputation: 673

In this situation I have relied on the clone method of jQuery. You can hide the original element and use the clone for your animation. To restor the original just destroy the clone and unhide the original.

Clone Documentation

Upvotes: 0

Related Questions