如何通过仅使用jquery动画元素底部到顶部

Question

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

我只是有点困惑。是否有其他方法来动画元素？

Answer 1

我再次猜测你想获得该动画中每个步骤的坐标。 jQuery的动画功能提供了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

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

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

你也可以改变“底”到“顶”和“右”到“左”和“+ =”到“ - =”或只是“ - ”

Answer 3

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

Answer 4

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