.slideDown() 在特定高度后只听一次，听 .scrollTop

Question

我遇到了这个问题，我得到了一个一开始隐藏的部分（".aboutsection"），当点击网页上的某个点时需要显示，然后开始对.slideDown（）进行动画处理。我让它工作了，但是每次我滚动到某个点时，它都会一遍又一遍地开始动画，这不是我想要的。

我

寻求不同的解决方案，但它们都不起作用，也不符合我的需求。（所以请不要把它作为副本）

$(window).scroll(function(){
 var wScroll = $(this).scrollTop();
 $(".aboutcontainer").hide();
 [...] (left out other function listening to scrolltop)
 if(wScroll > $('section.about').offset().top - ($(window).height() / 1.2)) {
  $(".aboutcontainer").slideDown(1400,'easeInOutQuart');
 }
});

我试图让函数检查".aboutcontainer"是"：可见"还是"：隐藏"，以便仅在隐藏部分时对其进行动画处理，但这不起作用。

Answer 1

您可能只是设置一个标志并作为条件的一部分进行检查：

var expanded = false;
$(".aboutcontainer").hide();
$(window).scroll(function(){
  var wScroll = $(this).scrollTop();
  [...] (left out other function listening to scrolltop)
  if(!expanded && wScroll > $('section.about').offset().top - ($(window).height() / 1.2)) {
    expanded = true;
   $(".aboutcontainer").slideDown(1400,'easeInOutQuart');
  }
});

Answer 2

由于slideDown操纵对象的高度，您是否尝试过检查高度是否大于 0？

if(wScroll > $('section.about').offset().top - ($(window).height() / 1.2)) {
    if( $(".aboutcontainer").height() < 0 ){
        $(".aboutcontainer").slideDown(1400,'easeInOutQuart');
    }
}