jquery - 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 ピクセルスクロールすると、7 つのツリーすべてが「フェードイン」し、それより上にスクロールすると「フェードアウト」します。

私が目指しているのは異なります。それぞれの木がフェードインするのではなく、上に跳ね返って (まるで地面から芽が出ているように) 現れるようにしたいのと、次々と発生するようにしたいのです。

ユーザーがトリガーポイントの上にスクロールバックした場合にそれらを非表示にするかどうかはわかりませんが、今のところそれらがどのように表示されるかだけが本当に心配です.

アドバイスをいただければ、とても助かります。ありがとう！

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

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

Answer 2

This isn't quite as simple as it first appears.

You need :

• to fire the animations only when the threshold (2800) is crossed, not every time the scroll event fires.
• a way to make the trees "bounce upward (as if they were sprouting from the ground)".
• a way to give each tree its own timing.
• to stop any animations that are in progress before starting new ones.

Here's some code :

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

untested

Notes:

• Each minitree nedds to be given class="minitree";

• Need to install jQuery UI on the page to get the 'easeOutElastic' effect.

• As it stands the code assumes the trees are each hidden behind a mask and they are animated by changing their css top property. This will require tgheminitgrees to be styles with position:absolute or position:relative and for top to force the trees to be initially hidden. The code is organised to make this aspect simple to change if the design is different.

• To fire the animations only when the threshold (2800) is crossed, the last animation to be fired is tracked with the property treeData.animState.

• jQuery makes stopping animations simple, with its stop() method.

• The values in the arrays treeData.show and treeData.hide will need to be adjusted to get the animation effect you want. Comments in the code should be enough to explain what each value is for.