jquery - 如何仅使用 jquery 从下到上为元素设置动画

Question

我知道我在问一个非常常见的问题，但我想知道是否有另一种方法可以animate 只element使用 jQuery？我创建了一个动画，但我想改进它，但我不知道该怎么做。请查看此小提琴以查看动画，或者您可以在此处查看：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。请参阅浏览器兼容性表。

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/

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

请尝试 附带的小提琴。您可能需要根据您的要求对此进行改进。

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

Answer 4

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

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

您还可以将“底部”更改为“顶部”，将“右侧”更改为“左侧”，将“+=”更改为“-=”或只是“-”