使用jquery的动画方向

  • Z时代
  • 2024-01-10
  • 分类：问答

我用响应脚本创建了雪花。一切似乎没问题。但是我想要像从左到右，从右到左和从上到下这样的片状物的方向增强。我试过了，但我不确定我犯了什么错误。使用jquery的动画方向

这里是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)); 
       }

我如何可以移动鳞片由左到右，右到左？ 任何建议都会很棒。

谢谢。

回答：

尝试的jQuery动画的step回调函数：

$(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

以上是 使用jquery的动画方向 的全部内容， 来源链接： utcz.com/qa/264213.html

回到顶部