0

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

一旦用户滚动到特定点，我希望在页面上显示 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 像素，所有七棵树都会“淡入”，而当用户滚动到上方时，它们会“淡出”。

我的目标是不同的：我希望每棵树都以向上弹跳的方式出现（就像它们从地面发芽一样）而不是逐渐消失，并且我希望它们一个接一个地发生。

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

如果您能提供一些建议，我将不胜感激。谢谢！

4

2 回答 2

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");
  }
});

演示 jsfiddle

编辑 - 独立树动画：

演示 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;
  }
});
于 2013-01-07T20:20:18.253 回答
0

这并不像最初看起来那么简单。

你需要 ：

  • 仅在超过阈值 (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;
        }
    });
});

未经测试

笔记：

  • 每个 minitree 都需要被赋予 class="minitree";

  • 需要在页面上安装 jQuery UI 才能获得“easeOutElastic”效果。

  • 就目前而言，代码假设每棵树都隐藏在掩码后面，并且通过更改其 csstop属性对其进行动画处理。这将要求 tgheminitgrees 是带有position:absoluteorposition:relative和 for的样式，top以强制最初隐藏树。如果设计不同，则对代码进行组织以使该方面易于更改。

  • 要仅在超过阈值 (2800) 时触发动画，使用属性跟踪要触发的最后一个动画treeData.animState。

  • stop()jQuery 使用它的方法使停止动画变得简单。

  • 需要调整数组中的值treeData.show以获得所需的动画效果。treeData.hide代码中的注释应该足以解释每个值的用途。

于 2013-01-07T22:20:20.727 回答