3

私は非常に一般的な質問をしていることを知っていますが、 jQueryのみを使用してanimate 別の方法があるかどうか知りたいですか？elementアニメーションを作成しましたが、改善したいので、どうすればよいかわかりません。このフィドルをチェックしてアニメーションを確認するか、walkoverappsで確認できます。

私は少し混乱しています。要素をアニメーション化する他の方法はありますか？

4

4 に答える 4

10

そのアニメーションの各ステップの座標を取得したいともう一度推測しています。jQuery animate関数はstep:function (number, tween)、アニメーションのすべてのステップで呼び出される関数を提供します。詳細については、デモを参照してくださいhttp://jsfiddle.net/nmGRt/5/

$('#rocket').delay(2000).animate({
    bottom: '600px'
}, {
    duration: 5000,
    complete: function () {},
    step: function (n, t) {
        var pos = $(this).position();
        $('#curVal')
            .text('X: ' + pos.left.toFixed(2) + ' Y: ' + pos.top.toFixed(2))
            .css({
            left: pos.left - 150,
            top: pos.top
        });
    }
});

なしでこれを試していると思いますjQuery UI。最新のブラウザのみを対象としている場合は、CSS3を使用して以下を試してください。ブラウザの互換性の表を参照してください。

JS：

setTimeout(function () {
    $('#rocket').addClass('fire').css('bottom', 600);
}, 2000);

CSS3：

.fire {    
    -moz-transition: bottom 5s;
    -webkit-transition: bottom 5s;
    -ms-transition: bottom 5s;
    -o-transition: bottom 5s;
    transition: bottom 5s;
}

デモ：http： //jsfiddle.net/nmGRt/2/

さらに、いくつかのクールな機能を使用してアニメーションを制御できcubic-bezierます。デモを参照http://jsfiddle.net/nmGRt/3/embedded/result/ 

.fire {
-webkit-transition: all 5000ms cubic-bezier(0.880, 0.045, 0.750, 0.750);
   -moz-transition: all 5000ms cubic-bezier(0.880, 0.045, 0.750, 0.750);
    -ms-transition: all 5000ms cubic-bezier(0.880, 0.045, 0.750, 0.750);
     -o-transition: all 5000ms cubic-bezier(0.880, 0.045, 0.750, 0.750);
        transition: all 5000ms cubic-bezier(0.880, 0.045, 0.750, 0.750); /* custom */
}

この関数は、次のサイトから生成できます：http: //matthewlein.com/ceaser/

追加

変換を使用したクイックプレイアウトhttp://jsfiddle.net/nmGRt/4/embedded/result/

于 2013-02-27T17:50:22.790 に答える
5

http://jsfiddle.net/naveendalmeida/JVMmE/2/をお試しください

HTML

<div id="content">
    <div id="left">
        <div class="pr" id="ani">
             <h3 id="rocket" style="bottom:50px"></h3>

            <div id="rocket-smoke"></div>
        </div>
    </div>
</div>

JS

<script type="text/javascript">

    function nav_animation(nav_obj, length, nav_intveral, direction) {
        var i = 0;
        var int = setInterval(function () {
            if (i < length) {
                    $(nav_obj).css(direction, i + "px");      
                i++;
            } else {
                window.clearInterval(int);
            }
        }, nav_intveral);
    }

    nav_animation('#rocket', 50, 1, 'bottom');
    nav_animation('#rocket', 100, 1, 'right');
    nav_animation('#rocket', 150, 1, 'bottom');
    nav_animation('#rocket', 200, 1, 'bottom');
    nav_animation('#rocket', 350, 1, 'right');
    setInterval("$('#rocket').css('-webkit-transform',' rotate(0deg)');",1700);
    nav_animation('#rocket', 400, 1, 'bottom');

</script>

CSS 

#rocket {
    position:absolute;
    bottom:50px;
    right:91px;
    background:url(http://walkoverapps.com/landing-content/rct.png) no-repeat;
    width:68px;
    height:84px;
    z-index:20;
    -webkit-transform: rotate(-45deg);
}

于 2013-03-05T09:41:08.993 に答える
2

多分あなたはこれをx軸とy軸で意味します、あなたはこのように正確な位置を言うことができます...

$(document).ready(function(){
    $('#rocket').delay(2000).animate({
        bottom:'+=600px',
        right:'-=200px'
    }, 5000,function(){});
});

「下」を「上」に、「右」を「左」に、「+ =」を「-=」に、または単に「-」に変更することもできます

于 2013-02-28T13:59:04.140 に答える
2

付属のフィドルをお試しください 。要件に基づいてこれを改善する必要があるかもしれません。

function animateCustom(cobj, clength, cintveral, cdirection) {

  var i = 0;

  var int = setInterval(function () {
    if (i < clength) {
        if (cdirection == 'y')
            $(cobj).css("bottom", i + "px");
        else if (cdirection == 'x')
            $(cobj).css("right", i + "px");            
        i++;
    } else {
        window.clearInterval(int);
    }
  }, cintveral);

}

animateCustom('#rocket', 100, 5, 'x');
animateCustom('#rocket', 200, 5, 'y');
于 2013-03-04T02:47:01.233 に答える