如何讓Div出現在不同的時間

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

未測試

注：

• 給予類= 「minitree」 每個minitree nedds;

• 需要在網頁上安裝jQuery UI的獲得「easeOutElastic」效應。

• 因爲它代表着假定樹掩蓋在掩碼後面並且它們通過改變它們的css top屬性來動畫。這將需要tgheminitgrees爲position:absolute或position:relative和top的樣式，以強制樹被初始隱藏。如果設計不同，代碼的組織方式便於更改此方面。

• 要僅在超過閾值（2800）時觸發動畫，將使用屬性treeData.animState跟蹤要觸發的最後一個動畫。

• jQuery讓停止動畫簡單，其stop()方法。

• 將需要調整陣列treeData.show和treeData.hide中的值以獲得所需的動畫效果。代碼中的註釋應足以解釋每個值的用途。