Question

I have two CSS tranistions as below (they both cover the page and then slide off, one after the other):

  $('#div1').transition({ x: '-1500px', delay: 800 }, 1000);
  $('#div2').transition({ x: '-1500px', delay: 1600 }, 1000);

the first one works fine, but the 2nd doesnt. Naturally I have checked all CSS and names:

#div1 {
    background-color: #000;
    z-index: 99;
    position:absolute;
    width: 100%;
    height: 100%;
}

#div2 {
    background-color: #fff;
    z-index: 90;
    position:absolute;
    width: 100%;
    height: 100%
}

Can anyone help me out? Thanks!

Answer 1

See if this is the effect you want: http://jsfiddle.net/Nr7nJ/

I changed div2’s background-color to red, since the browser by default uses white bg.