Как анимировать элемент снизу вверх, используя только jquery

Question

Я знаю, что задаю очень общий вопрос, но я хочу знать, есть ли другой способ для animateelement, используя только jQuery? Я создал анимацию, но я хочу ее улучшить, и я не знаю, как могу. 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

может быть, вы имеете в виду это с осью х и у , вы можете сказать точное положение, подобное этому ...

$(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); 
}