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 を多用する Web サイトのモバイル パフォーマンス (iOS 上) を改善しようとしています。私は、iOS が jQuery よりもはるかに優れた CSS トランジションを処理することを読みました。これらを 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 に答える