jQuery滚动到特定高度然后滑动div

时间:2017-10-19 18:21:54

标签: javascript jquery html css slidedown

好的,所以我已经尝试过查看这里的所有内容,很多人建议添加宽度或高度,甚至使用jquery css隐藏元素,但没有什么对我有用。

当用户滚动到页面的特定部分时,我试图使用3个元素slideDown。问题是3个元素在屏幕上闪烁了一会儿,然后向下滑动。如何删除短暂的闪光灯?



$('#e1, #e2, #e3').hide();

$(window).scroll(function() {
  var height = $(window).scrollTop();
  if (height > 400) {
    $('#e1').slideDown(1500);
    $('#e2').slideDown(2000);
    $('#e3').slideDown(2500);
  }
});

DIV#customContent DIV.customObj {
  float: left;
  width: 406px;
}

DIV#customContent DIV.customObj DIV {
  display: none;
  margin: 15px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="customContent">
  <div class="customObj">
    <h3>Service</h3>
    <div id="e1">
      <ul>
        <li>business offices</li>
        <li>hotels</li>
        <li>multi-family dwellings</li>
        <li>higher traffic</li>
        <li>passenger and freight</li>
        <li>elevators</li>
        <li>escalators</li>
        <li>wheel chair lifts</li>
        <li>dumbwaiters</li>
      </ul>
    </div>
  </div>
  <div class="customObj">
    <h3>Modernization</h3>
    <div id="e2">
      <ul>
        <li>business offices</li>
        <li>hotels</li>
        <li>multi-family dwellings</li>
        <li>higher traffic</li>
        <li>passenger and freight</li>
        <li>elevators</li>
        <li>escalators</li>
        <li>wheel chair lifts</li>
        <li>dumbwaiters</li>
      </ul>
    </div>
  </div>
  <div class="customObj">
    <h3>Lift Solutions</h3>
    <div id="e3">
      <ul>
        <li>business offices</li>
        <li>hotels</li>
        <li>multi-family dwellings</li>
        <li>higher traffic</li>
        <li>passenger and freight</li>
        <li>elevators</li>
        <li>escalators</li>
        <li>wheel chair lifts</li>
        <li>dumbwaiters</li>
      </ul>
    </div>
  </div>
  <div class="clear"></div>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案