How to target a div that is already in place among other divs and run and animate i?

Hey guys. I'm trying to figure out "animate" based on  an initial project.
This one has 3 rows of divs by the three based on the size of the table width they are in.
Let's say I have 9 boxes like the Brady Bunch and I would like to keep the structure as and would like to animate the center div - have it fly off from the right and snuggly go back into the middle,

There's a simple jfiddle jsfiddle.net/XqqtN/ that shows an example but I don;t know how to apply it to a given box like the aforementioned above. How do I do that?

Thanks in advance.
colonelblueAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
You mean something like this

http://jsfiddle.net/GaryC123/949v1vay/1/
0
colonelblueAuthor Commented:
Yes of course Gary,. :)
But will I need to know that exact positions for every div or could I just apply it like a function to a particular div?
0
colonelblueAuthor Commented:
What I mean is if there were 9 DIVS with id names A - J.
Regardless of how they are set up on the page can I call on DIV B and add an animate function it to it?
Lets say I like where they are placed now but what of I just wanted DIV B to slide from he left to aforementioned position, DIV E sl`ide form bottom, etc.?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GaryCommented:
http://jsfiddle.net/GaryC123/949v1vay/2/

This is using a dummy placeholder for the animated element, doesn't need any set positions.

$(function(){
    vleft=$("div div:nth-child(6)").offset().left+"px";
    vtop=$("div div:nth-child(6)").offset().top+"px";
   $("div div:nth-child(5)").animate({"left":vleft,"top":vtop},2000)
})

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
How are you wanting this to happen, at page load?
0
colonelblueAuthor Commented:
I'm perplexed.
Looking at code. How are you calling or directing it to the center row?
I don't understand the div:nth-child aspect.
What of it were to go to the second or last box?
Trying to understand and grasp concept.
0
GaryCommented:
:o)
How many div's are you wanting to animate? Just one or them all?
Is this to happen at page load?
0
colonelblueAuthor Commented:
Not exact at the moment, I'm just trying to learn the concept of taking any div on a page and being able to animate to the static position. ( whether from up, down, etc. ) Yes on page load so people can see the animation. gosh I miss Flash. :(
0
Kyle HamiltonData ScientistCommented:
are you trying to do with javascript and css what you used to do in flash? how did you work in flash, were you using the GUI to animate elements, or do you have AS experience?

if you do not have coding experience you are going to have quite a learning curve. everything that flash did under the hood for you, you will have to do yourself now. there are tools out there that purport to give you the functionality that flash had, but in JS, but i don't know how good they are. Adobe Edge is one of them (i think)

if you don't want to use a tool like Edge, you will have to spend some time learning css3 and javascript. you can do a lot just with css, using javascript to trigger animations rather than doing the actual animations. but keep in mind that css3 isn't the end all be all either. i posted a link in your last question regarding css vs js animations. you should read it or something similar to get a picture of the playing field.

i'm writing this long winded post because you said you wanted to learn. looking for code snippets that do sone specific bits of stuff is not conducive to learning.
0
GaryCommented:
Agree with Kyle, the concept is above but without real code to work with it's going to be pointless as what you code for one thing may not be the same for something else.
0
colonelblueAuthor Commented:
Hey guys, whoa opened a can of worms.
I mentioned Flash because it was so much simpler to move box A from coordinates X200 and y100 to X0 and y100,

In this post, perhaps I should not have mentioned the 9 boxes. What I wanted to learn was how to animate a div regardless of whether it is in between 8 others or alone with the same concept as above.

After page loads. I would like DIV A to be where it is before even add any animation. What I wanted to do - to add some pizazz - was to be able to have it DIV A come from the left or the right or below or above.
I was following some animation tutorials but it always has the example start from the very top of the page x0 y0. All well and good but I wanted to apply that "slide" to a div that is elsewhere and I am trying to figure that out.


Thanks again.
0
GaryCommented:
So what is it about the above the fiddle that doesn't work for you?
0
Kyle HamiltonData ScientistCommented:
conceptually, you can do this:

position your box with css where you want it. Add a transition rule to your box class.

create another class like ".boxMoved" and use css to position this element in the final position.

on page load (or whatever event you want), use javascript to add the boxMoved class to your box element, and let the css take care of the animation.

Those three steps are the easiest/simplest way to do what you are asking.
0
Kyle HamiltonData ScientistCommented:
.box{
   position:absolute;
   right:0;
   bottom:0;
   transition: all 1s;
}

.boxMoved{
   right:initial;
   bottom:initial;
   top:10px;
   left:10px;
}

$(function(){
   $(".box").addClass("boxMoved");
})
0
colonelblueAuthor Commented:
Hey guys. Sorry been out of pocket.

The solution I was looking for and figured out what was something like below;
It animated the div out and then "back into place".
If there was a way to make it so I can just apply it as a "class or function " to any div on the fly without having to code it for each would be even cooler. I don't know if it's even possible.
Like for example;
<div id="this div" class="this class would add the animation">

Thanks again guys!


$(".img2").animate({left:'100px'});
$(".img2").animate({left:'0px'},"slow","easeInQuad");
$(".img").animate({left:'-100px'});
$(".img").animate({left:'0px'},"slow","easeInQuad");

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.