Question

编辑:(我对这种编码很新，所以我知道我在下面提供的以下代码效率低，可能是边缘荒谬的。我正在寻找可以解决我的问题并告诉我的人如何以有效的方式做到这一点，而不是我在下面做的复制/粘贴方式。谢谢！）

我有7个不同的“树”，一旦用户滚动到特定点，我想在页面上显示。到目前为止，我可以让树木出现的唯一方法是将它们淡入其中，然而，使用我所拥有的代码，它们同时出现，而不是一个接一个地出现。这就是我所拥有的：

$(window).scroll(function(){
if($(window).scrollTop() > 2800){
  $("#minitree1").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 2800){
  $("#minitree1").fadeOut("fast");
}
});

$(window).scroll(function(){
if($(window).scrollTop() > 2800){
  $("#minitree2").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 2800){
  $("#minitree2").fadeOut("fast");
}
});

$(window).scroll(function(){
if($(window).scrollTop() > 2800){
  $("#minitree3").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 2800){
  $("#minitree3").fadeOut("fast");
}
});

$(window).scroll(function(){
if($(window).scrollTop() > 2800){
  $("#minitree4").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 2800){
  $("#minitree4").fadeOut("fast");
}
});

$(window).scroll(function(){
if($(window).scrollTop() > 2800){
  $("#minitree5").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 2800){
  $("#minitree5").fadeOut("fast");
}
});

$(window).scroll(function(){
if($(window).scrollTop() > 2800){
  $("#minitree6").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 2800){
  $("#minitree6").fadeOut("fast");
}
});

$(window).scroll(function(){
if($(window).scrollTop() > 2800){
  $("#minitree7").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 2800){
  $("#minitree7").fadeOut("fast");
}
});

因此，使用此代码，一旦用户从顶部滚动了2800像素，所有七棵树都“淡入”，当用户滚动到那上面时，它们会“淡出”。

我的目标是不同的：我希望每棵树通过向上弹跳（就好像它们从地面发芽）而不是淡入而出现，我希望它们一个接一个地发生。

如果用户滚动回到触发点之上，我不确定我是否希望它们消失，但我真的只关心它们现在是如何出现的。

如果你能提出一些建议，我将非常感激。谢谢！

Answer 1

通过在每个元素上设置一个类，为每个元素ID制作淡入/淡出是一件非常令人头痛的问题

<div id="minitree1" class="minitrees">...</div>
<div id="minitree2" class="minitrees">...</div>
etc...

然后脚本如此：

// cache reusable jQuery objects to variables
var $window = $(window), 
    $minitrees = $('.minitrees');

// one event with one scrollTop() check
$window.scroll(function(){
  if($window.scrollTop() > 2800){
    $minitrees.fadeIn("slow");
  } else {
    $minitrees.fadeOut("fast");
  }
});

demo jsfiddle

编辑 - 独立树动画：

demo jsfiddle

var $window = $(window),
  $minitrees = $('.minitrees'),
  delay = 0,
  delayIncrement = 500;

$window.scroll(function () {
  if ($window.scrollTop() > 2800) {
    // loop through the trees increasing the delay each time
    $minitrees.each(function () {
      // 1. delay 0, 500, 1000
      // 2. show the tree
      // 3. animate the tree up from the ground (css starts with -100px animates to 0) 
      $(this).delay(delay).show().animate({
        bottom: '0'
      });
      delay += delayIncrement;
    });
    delay = 0;
  }
});

Answer 2

这并不像第一次出现那么简单。

你需要：

仅在超过阈值（2800）时触发动画，而不是每次scroll事件触发时触发动画。
一种使树木“向上反弹（好像它们从地面发芽）的方法”。
一种为每棵树提供自己时间的方法。
在开始新动画之前停止正在进行的任何动画。

以下是一些代码：

$(function(){
    //To keep the data tidy, we have an object with a bunch of properties 
    var treeData = {
        show = [0, 700, 200, 1000, {'top': '0px'}, 'easeOutElastic'],//minDelay(ms), maxDelay(ms), minDuration(ms), maxDuration(ms), cssMap, easing (adjust as necessary)
        hide = [0, 500, 50, 400, {'top': '200px'}, 'swing'],//minDelay(ms), maxDelay(ms), minDuration(ms), maxDuration(ms), cssMap, easing (adjust as necessary)
        timeOuts = {},
        animState = 0//0: <2800; 1: >=2800
    };

    //Note, animateTree() doesn't actually perform the animation, rather it returns a function that will perform the animation at some point in the near future.
    function animateTree(el, treeArray) {
        return function(){
            var duration = treeArray[2] + Math.random() * (treeArray[3] - treeArray[2]);
            var cssMap = treeArray[4];
            var easing = treeArray[5];
            $(el).animate(cssMap, duration, easing);
        }
    }
    function establishAnimation(el, treeArray){
            var id = el.id;
            if(treeData.timeOuts[id]) {
                clearTimeout(treeData.timeOuts[id]);
            }
            treeData.timeOuts[id] = setTimeout(animateTree(el, treeArray), treeArray[0] + Math.random() * (treeArray[1] - treeArray[0]));
    }
    $(window).scroll(function(){
        if(treeData.animState == 0 && $(window).scrollTop() >= 2800){
            $(".minitree").stop().each(function() {
                establishAnimation(this, treeData.show);
            });
            treeData.animState = 1;
        }
        else if(treeData.animState == 1 && $(window).scrollTop() < 2800){
            $(".minitree").stop().each(function() {
                establishAnimation(this, treeData.hide);
            });
            treeData.animState = 0;
        }
    });
});

未测试

注意：

每个小型小人都被赋予class =“minitree”;
需要在页面上安装jQuery UI才能获得'easeOutElastic'效果。
目前代码假设树木都隐藏在面具后面，并通过更改其css top属性进行动画处理。这将要求tgheminitgrees为position:absolute或position:relative和top的样式，以强制最初隐藏树。如果设计不同，则组织代码以使这个方面变得简单。
要仅在超过阈值（2800）时触发动画，将使用属性treeData.animState跟踪要触发的最后一个动画。
jQuery使用stop()方法简化停止动画。
需要调整数组treeData.show和treeData.hide中的值以获得所需的动画效果。代码中的注释应该足以解释每个值的用途。

如何让Divs出现在不同时期

2 个答案: