CSS Transition equivalent to jQuery fadeIn(), fadeOut(), fadeTo()

Question

I have this

$('#button1').click(function(){

    $('#header_bg').fadeTo(15, 0, function()
    {
        document.getElementById('header_bg').style.fill = '#FF0000';
    }).fadeTo('slow', 1);

    $('#header_text1').fadeOut(250);

    $('#header_text2').fadeIn(250);

});

I am trying to improve mobile performance (on iOS) of a jQuery heavy website. I have read iOS handles CSS transitions much better than jQuery. What is the best method of making these iOS friendly?

Answer 1

I've written loads about this (http://css3.bradshawenterprises.com) , but in short, you just add the transitions properties, then change the property.

So, instead of $('#header_text1').fadeOut(250);, you'd use in your CSS:

-webkit-transition: opacity 250ms ease-in-out;
-moz-transition: opacity 250ms ease-in-out;
-o-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;

, then in your JS,

$('#header_text1').css({'opacity', 0});

If you want to run something when an animation has happened, there are events for transitionEnd that fire.

It's quite a different approach, but people have tried to bridge between JS and CSS in a few ways:

http://playground.benbarnett.net/jquery-animate-enhanced/ is a good link for this.