CSS转换等效于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比jQuery更好地处理CSS转换。让这些iOS友好的最佳方法是什么？

我已经写了很多关于这方面的文章(http://css3.bradshawenterprises.com)，但简而言之，您只需添加转换属性，然后更改该属性。

因此，您可以在CSS中使用：而不是$('#header_text1').fadeOut(250);

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

演示试试这个

@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.in, .out {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-duration: 705ms;
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-duration: 705ms;        
}
.fade.out {
        z-index: 0;
        -webkit-animation-name: fadeout;
        -moz-animation-name: fadeout;
}
.fade.in {
        opacity: 1;
        z-index: 10;
        -webkit-animation-name: fadein;
        -moz-animation-name: fadein;
}

CSS转换是您想要的东西，

下面是一个很好的演示，显示图像渐变效果：http://cssnerd.com/2012/04/03/jquery-like-pure-css3-image-fade-in/

这里有一些演示代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function() {
                var change = true;
                $('#ba').click(function() {
                    if(change) {
                        $('#a').css('opacity', ' 0');
                        $('#b').css('opacity', '1');
                    } else {
                        $('#a').css('opacity', '1');
                        $('#b').css('opacity', '0');
                    }
                    change = !change;
                });
            });
        </script>
        <style>
            .fadeeffect {
                -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;
            }               
        </style>
    </head>
    <body>
        <button type="button" id="ba" >
            Click Me!
        </button>
        <div>
            <p id="a"class="fadeeffect">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p id="b" class="fadeeffect">
                eafdsaf dsa dgsf dgadg dfg dagfadgLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </body>
</html>

根据Rich Bradshaw的回答，带有回调的jQuery中fadeOut的实现将是：

// This function is an alternative to jquery fadeOut.
// jQuery fadeOut changes opacity gradually, forcing the browser to refresh the page each time.
// Using CSS transitions allows the browser to use GPU to render the page, which is much faster if the DOM is big.
jQuery.fn.fadeOut = function(callback) {
    let $selector = $(this[0]);
    $selector.addClass('fadeOut');
    $selector.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
    function(e){
        $selector.off(e);
        $selector.removeClass('fadeOut');
        $selector.css('display', 'none');
        $selector.css('opacity', 1);     // Revert back opacity since element is not displayed anymore
        if(typeof callback === 'function')
            callback();
    });
    $selector.css('opacity',0);
}

当然还有.fadeOut:

.fadeOut {
    -webkit-transition: opacity 1000ms ease-in-out;
    -moz-transition: opacity 1000ms ease-in-out;
    -o-transition: opacity 1000ms ease-in-out;
    transition: opacity 1000ms ease-in-out;
}

然后您可以正常使用：

$('#div').fadeOut(function() { console.log('done!') };

fadeIn也是如此。

相关内容

最新更新

热门标签：