Question

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

Answer 1

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