Question

I was using:

Data.$notification
     .delay(1500)
     .animate({
        right: '+=' + (Data.$notification.width() + 45)
      }, 700)
     .delay(2500)
      .animate({
           right: '-=' + (Data.$notification.width() + 45)
      }, 700, function() { 
          $(this).remove(); 
      });

But it’s not smooth enough, so taking peoples advice I want to use translate 3D css.
ATM I can’t get it working, I’ve tried:

Data.$notification
.delay(1500)
.addClass('move-into-view')
.delay(2500)
.removeClass('move-into-view').addClass('move-outof-view')
.delay(1500)
.remove();

Where

.rotate-notification.move-into-view {
    -webkit-transform: translate3d(-175px, 0, 0);
}
.rotate-notification.move-outof-view {
    -webkit-transform: translate3d(175px, 0, 0);
}

Is this actually possible? or am I going about this the wrong way?

Answer 1

.delay() only works with a queue:

The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn’t, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript’s native
setTimeout function, which may be more appropriate for certain use
cases.

Source: http://api.jquery.com/delay/

So a suggested route would be:

setTimeout(function () {
    Data.$notification.addClass('move-into-view');
    setTimeout(function () {
        Data.$notification.removeClass('move-into-view').addClass('move-outof-view');
        setTimeout(function () {
            Data.$notification.remove();
        }, 1500);
    }, 2500);
}, 1500);

Also you need to set a transition rule in your CSS for an animation:

.rotate-notification {
-webkit-transition : -webkit-transform 1.5s ease-in-out;
   -moz-transition : -moz-transform 1.5s ease-in-out;
    -ms-transition : -ms-transform 1.5s ease-in-out;
     -o-transition : -o-transform 1.5s ease-in-out;
        transition : transform 1.5s ease-in-out;
}
.rotate-notification.move-into-view {
-webkit-transform : translate3d(175px, 0, 0);
   -moz-transform : translate(175px, 0);
    -ms-transform : translate(175px, 0);
     -o-transform : translate(175px, 0);
        transform : translate(175px, 0);
}
.rotate-notification.move-outof-view {
-webkit-transform : translate3d(0, 0, 0);
   -moz-transform : translate(0, 0);
    -ms-transform : translate(0, 0);
     -o-transform : translate(0, 0);
        transform : translate(0, 0);
}

Here is a demo: http://jsfiddle.net/vJHvA/4/

Note that if you don’t use something like Modernizr to check browser compatibility and adapt accordingly then you can break functionality in browsers other than Mobile Safari (for example the Android Browser which is also a WebKit browser).