27

コードに遷移行を追加すると、jQuery が壊れます。どうすれば修正できますか？

a(this).next().css({
    left: c,
    transition: 'opacity 1s ease-in-out'
});

スライダー内である div から次の div へのフェードを設定しようとしています

4

2 に答える 2

44

ステップ1）セミコロンを削除します。これは作成中のオブジェクトです...

a(this).next().css({
    left       : c,
    transition : 'opacity 1s ease-in-out';
});

に

a(this).next().css({
    left       : c,
    transition : 'opacity 1s ease-in-out'
});

ステップ 2)ベンダー プレフィックス...transitionこれは標準であるため、ブラウザーは使用しません。これは、最新のブラウザーでも実験的な機能です。

a(this).next().css({
    left             : c,
    WebkitTransition : 'opacity 1s ease-in-out',
    MozTransition    : 'opacity 1s ease-in-out',
    MsTransition     : 'opacity 1s ease-in-out',
    OTransition      : 'opacity 1s ease-in-out',
    transition       : 'opacity 1s ease-in-out'
});

ここにデモがあります：http://jsfiddle.net/83FsJ/

ステップ 3)より良いベンダー プレフィックス...大量の不要な CSS を要素に追加する (ブラウザーによって無視されるだけです) 代わりに、jQuery を使用して、使用するベンダー プレフィックスを決定できます。

$('a').on('click', function () {
    var myTransition = ($.browser.webkit)  ? '-webkit-transition' :
                       ($.browser.mozilla) ? '-moz-transition' : 
                       ($.browser.msie)    ? '-ms-transition' :
                       ($.browser.opera)   ? '-o-transition' : 'transition',
        myCSSObj     = { opacity : 1 };

    myCSSObj[myTransition] = 'opacity 1s ease-in-out';
    $(this).next().css(myCSSObj);
});​

ここにデモがあります：http://jsfiddle.net/83FsJ/1/

transitionまた、アニメーション化するプロパティが であることを宣言で指定した場合、プロパティをopacity設定してleftもアニメーション化されないことに注意してください。

于 2012-04-19T22:27:03.537 に答える
6

CSS3 トランジションを扱うと、コードがすぐに乱雑になる可能性があります。CSS3 アニメーション/トランジションの複雑さを処理するjQuery Transitなどのプラグインを使用することをお勧めします。

さらに、プラグインは webkit-transition ではなく webkit-transform を使用します。これにより、モバイル デバイスはハードウェア アクセラレーションを使用して、アニメーションが発生したときに Web アプリにネイティブのルック アンド フィールを与えることができます。

JS Fiddle ライブデモ

Javascript:

$("#startTransition").on("click", function()
{

    if( $(".boxOne").is(":visible")) 
    {
        $(".boxOne").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxOne").hide(); });
        $(".boxTwo").css({ x: '100%' });
        $(".boxTwo").show().transition({ x: '0%', opacity: 1.0 });
        return;        
    }

    $(".boxTwo").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxTwo").hide(); });
    $(".boxOne").css({ x: '100%' });
    $(".boxOne").show().transition({ x: '0%', opacity: 1.0 });

});

ブラウザ間の互換性を確保するための大変な作業のほとんどは自動的に行われ、モバイル デバイス上で魅力的に機能します。

于 2013-03-11T18:45:29.450 に答える