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

我有这个

$('#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);

});

我正在尝试提高 jQuery 重度网站的移动性能（在 iOS 上）。我读到 iOS 处理 CSS 转换的效果比 jQuery 好得多。使这些 iOS 友好的最佳方法是什么？

我已经写了很多关于这个的文章（http://css3.bradshawenterprises.com 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/ http://playground.benbarnett.net/jquery-animate-enhanced/是一个很好的链接。