CSS Transition相当于jQuery fadeIn(),fadeOut(),fadeTo()

我有这个

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

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

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

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

});

我正在努力提高jQuery重型网站的移动性能(在iOS上).我已经阅读iOS处理CSS转换比jQuery更好.使这些iOS友好的最佳方法是什么？

解决方法

我已经写了关于这个( http://css3.bradshawenterprises.com)的负载,但简而言之,你只需添加过渡属性,然后更改属性.

所以,而不是$(‘#header_text1’).fadeOut(250);,你在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;

,然后在你的JS中,

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

如果你想在动画发生时运行一些东西,那么有一些事件可以解决transitionend.

这是一种完全不同的方法,但人们试图通过以下几种方式在JS和CSS之间架起桥梁：

http://playground.benbarnett.net/jquery-animate-enhanced/是一个很好的链接.