4

我有这个

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

4

4 回答 4

4

我已经写了很多关于这个 ( 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/是一个很好的链接。

于 2012-09-12T07:15:32.623 回答
4

演示 试试这个

@-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;
}
于 2012-09-12T07:16:01.730 回答
1

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>
于 2012-09-12T07:20:28.873 回答
1

从 Rich Bradshaw 的回答中，jQuery 中带有回调的淡出实现将是：

// 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!') };

使用淡入淡出也可以做到这一点。

于 2018-07-09T08:19:51.860 回答