colonelblue
asked on
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.
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.
ASKER
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?
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?
ASKER
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.?
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.?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
How are you wanting this to happen, at page load?
ASKER
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.
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.
:o)
How many div's are you wanting to animate? Just one or them all?
Is this to happen at page load?
How many div's are you wanting to animate? Just one or them all?
Is this to happen at page load?
ASKER
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. :(
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.
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.
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.
ASKER
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.
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.
So what is it about the above the fiddle that doesn't work for you?
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.
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.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
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");
http://jsfiddle.net/GaryC123/949v1vay/1/