Question

我有这个

$('#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友好的最佳方法是什么？

Answer 1

demo 试试这个

@-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;
}

Answer 2

我已经写了关于此的加载（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;：

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

，然后在你的JS中，

{{1}}

如果你想在动画发生时运行某些内容，那么有一些事件可以解决transitionEnd。

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

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

Answer 3

CSS Transitions是你要找的东西，

这是一个很好的演示，显示图像淡入淡出效果：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>

Answer 4

根据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也可以做到这一点。

CSS Transition相当于jQuery fadeIn（），fadeOut（），fadeTo（）

4 个答案: