Анимация с использованием jquery

Question

Я создал снежную хлопь с отзывчивым сценарием. Все кажется, ничего не проблема. Но я хочу улучшить направление хлопьев, как слева направо и справа налево, так и сверху вниз. Я попытался, но я не уверен, где я совершил ошибку.

Вот fiddle

Javascript:

 var fallingSpeed = Math.floor(Math.random() * 5 + 1); 
      var movingDirection = Math.floor(Math.random() * 2); 
      var currentTop = parseInt(jQuery(this).css('top')); 
      var currentLeft = parseInt(jQuery(this).css('left')); 
      jQuery(this).css('top', currentTop + fallingSpeed); 
     alert(currentLeft); 
// 
     //alert(movingDirection); 
       if (movingDirection === 0) { 
        jQuery(this).css('left', currentLeft + fallingSpeed); 
       } else { 
        // set the snow move to left 
        jQuery(this).css('left', currentLeft + -(fallingSpeed)); 
       } 

Как я могу переместить чешуйки слева направо и справа налево? Любое предложение было бы замечательным.

Спасибо.

Answer 1

Попробуйте step обратного вызова функции JQuery одушевленных:

$(function(){ 
    var drop = $('.drop').detach(); 
    function create(){ 
    var clone = drop 
     .clone() 
     .appendTo('.container') 
     .css('left', Math.random()*$(document).width()-20) 
    .html('*') 
     .animate(
       {'top': $(document).height()-20}, 
      { 
       duration: Math.random(1000)+8000, 
       complete:function(){ 
       $(this).fadeOut(200,function(){$(this).remove();}); 
       }, 
       step:function (currentTop){ 
            var fallingSpeed = Math.floor(Math.random() * 5 + 1); 
      var movingDirection = Math.floor(Math.random() * 2); 
      var currentTop = parseInt(jQuery(this).css('top')); 
      var currentLeft = parseInt(jQuery(this).css('left')); 
      jQuery(this).css('top', currentTop + fallingSpeed); 

       if (movingDirection === 0) { 
        jQuery(this).css('left', currentLeft + fallingSpeed); 
       } else { 
        // set the snow move to left 
        jQuery(this).css('left', currentLeft + -(fallingSpeed)); 
       } 
       } 
      }); 
    } 

DEMO