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”是否为“：visible”或“：hidden”以仅在隐藏该部分时为其设置动画，但这不起作用。

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

.slideDown（）在一定高度后只有一次，听.scrollTop

2 个答案: