CSS过渡等效于jQuery fadeIn()，fadeOut()，fadeTo() [英] CSS Transition equivalent to 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友好的最佳方法是什么?

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?

推荐答案

我已经为此写了很多文章( http://css3.bradshawenterprises.com )，但是简而言之，您只需添加转换属性，然后更改该属性即可.

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

因此，您可以在CSS中使用$('#header_text1').fadeOut(250);代替

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;

，然后在您的JS中，

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

如果要在发生动画时运行某些内容，则有可能触发过渡事件.

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

这是完全不同的方法，但是人们已经尝试通过以下几种方式在JS和CSS之间架起桥梁:

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/是一个很好的链接.

这篇关于CSS过渡等效于jQuery fadeIn()，fadeOut()，fadeTo()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！