jquery - 动画高度在滚动时无法正常工作

Question

当用户滚动到图像的容器时，我尝试为图像的高度设置动画。

向下滚动时它第一次起作用。

此后，上下滚动时无法正常工作。

它会闪烁。

我的代码是这样的

function test($el) {
    var docViewTop = $(window).scrollTop(),
    docViewBottom = docViewTop + $(window).height(),
    elemTop = $el.offset().top,
    elemBottom = elemTop + $el.height();
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
     && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
  }


  $(window).scroll(function(){
    var windowWidth = $(window).width();
    if(windowWidth >= 680){ 
      $("#desktopGraphWrap, #phoneGraphWrap, #ipadGraphWrap").show();
      if(test($('div.figurette'))) {
        console.log('test success')
        $('.fadeAnim').fadeIn("fast", function(){
          $('#desktopGraph').animate({
            height:"96px"
          },"slow", function(){
            $('#ipadGraph').animate({
              height:"98px"
            },"slow", function(){
              $("#phoneGraph").animate({
                height:"84px"
              }, "slow", function(){
              });
            });
          });
        });
      }else{
        $('.fadeAnim').hide();
        $('#desktopGraph, #ipadGraph, #phoneGraph').animate({"height":0},"fast");
      }
    }else{
      $("#desktopGraphWrap, #phoneGraphWrap, #ipadGraphWrap").hide();
    }
  });

我想要“desktopGraph”、“phoneGraph”和“ipadGraph”从底部到顶部以动画方式显示高度。

当向下滚动时，它应该将其高度重置为零，并且每当我们滚动到容器 div 时，动画都应该起作用。

像这样的html

<div id="desktopGraphWrap"  class="">
    <img src="img/blue-bg-web.png" class="img-responsive fadeAnim">
    <img src="img/desktopGraph.png"  id="desktopGraph" class="img-responsive">
</div>
<div id="phoneGraphWrap" class="">
    <img src="img/blue-bg-iphone.png" class="img-responsive fadeAnim">
    <img id="phoneGraph" src="img/phoneGraph.png" class="img-responsive">
</div>
<div id="ipadGraphWrap" class="">
    <img src="img/blue-bg-ipad.png" class="img-responsive fadeAnim">
    <img id="ipadGraph"  src="img/ipadGraph.png" class="img-responsive">
</div>

还有像这样的CSS..

#desktopGraph {
    position: absolute;
    width: 160px;
    height: 0px;
    left: 36px;
    bottom: -150px;
}
#phoneGraph {
    position: absolute;
    width: 47px;
    height: 0px;
    left: 287px;
    bottom: -172px;
}
.fadeAnim{
    position: absolute;
    display: none;
}
#desktopGraphWrap .fadeAnim{
    left: 36px;
    bottom: -150px;
}
#phoneGraphWrap .fadeAnim {
    left: 287px;
    bottom: -172px;
}
#ipadGraphWrap .fadeAnim {
    left: 437px;
    bottom: -165px;
}
#ipadGraph {
    position: absolute;
    width: 73px;
    height: 0px;
    left: 437px;
    bottom: -165px;
}
#desktopGraphWrap, #phoneGraphWrap, #ipadGraphWrap{
    position: relative;
    float: left;
}
#desktopGraphWrap, #desktopGraphWrap .animateIn {
    height: 96px;
}
#phoneGraphWrap, #phoneGraphWrap .animateIn {
    height: 84px;
}
#ipadGraphWrap, #ipadGraphWrap .animateIn{
    height: 98px;
}

jsFiddle here

Answer 1

http://jsfiddle.net/s489M/8/

我添加了.stop(true, true)在每个 .animate() 之前。所以现在前两个不再闪烁，而是在滚动到时保持可见。

 $('#desktopGraph').stop(true, true).animate({
                        height: $('#desktopGraph').height() == 0 ? 96 : 0
                    }, "slow", function () {
                        $('#ipadGraph').stop(true, true).animate({
                            height: $('#ipadGraph').height() == 0 ? 98 : 0
                        }, "slow", function () {
                            $("#phoneGraph").stop(true, true).animate({
                                height: $('#ipadGraph').height() == 0 ? 84 : 0
                            }, "slow");

请告诉我这是否更接近您想要的。

---

编辑:

我又玩了一会儿，现在我让它们在滚动到时都保持原样。我想这就是你想要的。 http://jsfiddle.net/s489M/9/

    if (!$('.fadeAnim').is(':visible')) {
        $('.fadeAnim').fadeIn("fast", function (event) {
            $('#desktopGraph').stop(true, true).animate({ //added .stop(true, true) here
                height: $('#desktopGraph').height() == 0 ? 96 : 0
            }, "slow", function() {
                $('#ipadGraph').stop().animate({ //added .stop() here
                    height: $('#ipadGraph').height() == 0 ? 98 : 0
                }, "slow", function() {
                    $("#phoneGraph").stop(true).animate({ // added .stop(true) here
                        height: $('#phoneGraph').height() == 0 ? 84 : 0
                    }, "slow");
                });
            });
            // event.stopPropagation();
        });
    }
} else {
    $('.fadeAnim').fadeOut("fast", function (event) {
        $('#desktopGraph, #ipadGraph, #phoneGraph').stop().animate({ //added .stop() here
            height: 0
        }, "fast");
        // event.stopPropagation();
    });
}