1

Spry が jQuery よりもスムーズかどうかはわかりませんが、アニメーションをhttp://labs.adobe.com/technologies/spry/samples/effects/slide_sample.htmlほどスムーズにすることはできません。

次のようにアニメーションを実行します。

 $("#button").click(function (e) {
    $("#thediv").css('margin-left',$(window).width + 10 + 'px');
    $("#thediv").animate({
       'margin-left' : '0'
   },100);
 });

プラグインを使用してフレームレートを下げ、ミリ秒を調整して、イージングを試してみました。Spry は何か違うことをしますか? 私の知る限り、jQuery のように DOM を操作します。滑らかな「左からスライド」の div トランジションを作成するための理想的なアニメーション設定は何ですか。Web アプリは携帯電話用で、div 切り替えはビューの切り替え用です。

4

1 に答える 1

1

はい、正確な効果を得ることができます:動作デモ :) http://jsfiddle.net/FjgjE/またはhttp://jsfiddle.net/YWcgw/

これらの js および css ファイルを使用し、残りの html と完全な js コードはデモにあります。

私が何かを逃した場合はお知らせください！

:)デモで自由に遊んでいただけることを願っています。

スクリプト

<link href="http://labs.adobe.com/technologies/spry/css/samples.css" rel="stylesheet" type="text/css" />
<script src="http://labs.adobe.com/technologies/spry/includes/SpryEffects.js" type="text/javascript"></script>

コード

   var animation_start = function(){
        var button = document.getElementById('animation_button');
        if (button){
            button.disabled = true;
            button.style.backgroundColor = '#FFF';
        }
    }

    var animation_stop = function(){
        var button = document.getElementById('animation_button');
        if (button){
            button.disabled = false;
            button.style.backgroundColor = '';
        }
    }

    var slide_func = new Spry.Effect.Slide('slideIt', {toggle:true, setup: animation_start, finish: animation_stop});​
于 2012-07-27T19:54:20.623 に答える