CODEWITHSUNDEEP
jqueryanimation
balexandre
balexandre

Reputation: 75083

animation: Move element from one position to another

I'm trying to make a nice visual effect so the user can actual see that an element was been added to the waiting list.

Moved from the lovely Apple OS effects in several application like iMovie when you swap the library with the video history I'm trying to do a simple movement from a div element... but this turned out to be a little hard.

Question will be, does anyone know any library to do the same in a simpler/nicer way?

What I could accomplish in 5 minutes was this:

http://jsbin.com/efihax

edit link: http://jsbin.com/efihax/edit

My idea is so smoothly shrink the .hero-unit div and make it like it's been added to the Waiting List

after this first 5 minutes I could see that this would be turn out nice if I started to code an endless animate calls... not a good practice.

Is there any other way? Thought about CCS3 transitions / animations but I'm not that familiarized with it and still don't know how I could do this...

An image to show what I'm trying to accomplish with the animate

enter image description here

Upvotes: 4

Views: 4024

Answers (2)

David Hedlund
David Hedlund

Reputation: 129792

Some issues with your code:

  • The fadeOut callback will be called once for each element that is faded out. Your code might run more smoothly if you dropped the callback and instead set a timeout to start executing the rest of the code only once, when the animation is timed to end.

  • When you start your animation, you've set position: absolute, but your size and position of the element is still derived from its DOM position, so that it'll jump once you start animating these properties.

    In the timeout, try setting the start properties:

      orig
    .css({
      'position':'absolute',
      'width':orig.width(),
      'height':orig.height(),
      'left':orig.position().left,
      'top':orig.position().top
    });

  orig.empty();

  • Your element currently appears below the .waitList .label because of its margin, and it appears greater than 1x1 px because of its padding. Try animating these as well.

My edit of your code

Update

I realized that composite styles don't animate very well. To get a smooth transition, you'd want to animate margin-top and margin-bottom individually, rather than just margin, and the same with all four padding properties.

My updated code

Upvotes: 2

Th0rndike
Th0rndike

Reputation: 3436

The problem is that you don't animate the container. Just by changing the animated element to "container" the item did fade completely. Work around it for a while and it will work.

Upvotes: 0

Related Questions