Question

我想在你滚动时出现一些图像，我想要动画，它们是随机的。

我有这个：

$(window).scroll( function(){
    /* Check the location of each desired element */

    $('.conferencia').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it it */
        if( (bottom_of_window) > bottom_of_object ){

            $(this).animate({opacity:'1'},{duration:1500, queue: false});
            randomAnim($(this).find("img"));

        }

    });

});

我不知道这部分是否正确完成，当窗口底部位于物体底部时，图像并不完全出现。

现在我有了一个函数randomAnim（）来选择形成一个动画拉动：

function randomAnim(element){

    switch(Math.floor(Math.random() * 3) + 1) {
    case 1:
        element.css({'transform':'rotateX(360deg)'});
        break;
    case 2:
        element.css({'transform':'rotateZ(360deg)'});
        break;
    case 3:
        element.css({'transform':'rotateY(360deg)'});
        break;
    }
}

使用此代码，动画不会执行，但如果我在每次中断之前放置 alert（1）; 动画有效，那么我想问题就是数学.random会计算太多数字并且会崩溃，但我不确定。

编辑：我添加了那个小提琴https://jsfiddle.net/4qfgz0z9/1/ 它不是完全相同的行为，但我认为它可以帮助。我意识到，如果你滚动一点并停止动画随机工作与否，但如果你滚动和滚动动画不起作用。另一个问题是动画反复重复，而不是在对象出现时只做一次。

Answer 1

我添加了一个锁并且动画现在可以正常工作，因此可能多次设置css可能会清除现有的转换

$(document).ready(function() {
  var animated = []

  $(window).scroll(function() {

    $('div').each(function(i) {
      if (animated[i]) {
        return
      }

      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      /* If the object is completely visible in the window, fade it it */
      if ((bottom_of_window) > bottom_of_object) {
        animated[i] = true
        $(this).animate({
          opacity: '1'
        }, {
          duration: 1500,
          queue: false
        });
        randomAnim($(this));
      }

    });

  });
});

https://jsfiddle.net/3v2jcqqg/

在JQuery上制作随机动画而不会随机数量计算崩溃

1 个答案: