Question

我知道我在问一个非常常见的问题，但是我想通过仅使用jQuery来了解animate element是否还有另一种方式？我创建了一个动画，但我想改进它，我不知道怎么做。 Please check this fiddle to see the animation或者您可以在此处查看：walkoverapps。

我只是有点困惑。还有其他方法可以为元素设置动画吗？

Answer 1

我再次猜测你想获得该动画中每一步的坐标。 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。见Browser Compatibility表。

<强> 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;
}

DEMO： 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/
快速播放

Answer 2

尝试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);
}

Answer 3

也许你的意思是x轴和y轴，你可以说出这样的确切位置......

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

你也可以将“bottom”改为“top”，将“right”改为“left”，将“+ =”改为“ - =”或只改为“ - ”

Answer 4

请尝试附加fiddle。您可能需要根据您的要求改进这一点。

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');

如何仅使用jquery为元素底部到顶部设置动画

4 个答案: