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

Adidev 发表于 Dev

阿迪杰夫

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

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

之后，上下滚动将无法正常工作。

闪烁。

我的代码是这样的

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在这里

克拉波罗

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