Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 152
  • Last Modified:

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.
0
colonelblue
Asked:
colonelblue
  • 6
  • 6
  • 3
2 Solutions
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now