Question

我使用Flexbox创建了一个方格div的网格来复制打印图像，并希望每个方块在页面滚动到某个点时从最高容器div的顶部向下滑动。虽然我知道浏览器正在获取.scroll函数，但这并没有解决，因为我有一个控制台日志正在运行。在这一点上，我一直在努力让一个div滑动。 Flexbox超级严格还是我错过了什么？这是代码。

<script>
  $(document).ready(function(){
      $( this ).scroll(function() {
        if ($(this).scrollTop() > 50){
        $( "#small-twelve" ).slideDown( 5000, function(){
          console.log("scrolled!")
        })
        };
      });
    });
</script>

HTML

<div class="square-container">
            <div class="square-smalls-container">
              <div class="small-eleven">
                <div class="text">
                  <h3>+63.5%</h3>
                  <p>more computer &amp; data processing <br/> services</p>
                </div>
              </div>
              <div class="small-twelve" id="small-twelve">
                <div class="text">
                  <h3>+49.0%</h3>
                  <p>other freight &amp; <br/>port services</p>
                </div>
              </div>
            </div>
              <div class="long-one">
                <div class="text">
                  <h3>+247.9%</h3>
                  <p>more film &amp; television <br/>distribution services</p>
                </div>
              </div>
            </div>
      </div>

CSS

.square-smalls-container{
        flex-direction: row;
        display: flex;
        flex: 2;
        box-sizing: border-box;
        position: relative;
      }
.small-one, .small-two, .small-three, .small-four, .small-five, .small-six, .small-seven, .small-eight, .small-nine, .small-ten, .small-eleven, .small-twelve{
        display: flex;
        box-sizing: border-box;
        padding: 10px;
        flex-basis: 18%;
        margin: 0 auto;
        position: relative;
      }

.small-eleven, .small-twelve{
        flex: 1;
        margin-left: 2%;
        margin-right: 2%;
      }

Answer 1

你正在滑动一个div的id

    $( "#small-twelve" ).slideDown( 5000, function(){
      console.log("scrolled!")
    })

不确定为什么你希望别人移动。检查你的jQuery选择器。这与flexbox无关： - ）

为某些div＆amp;添加了课程slideMe更新了您的jQuery选择器，以选择所有具有类slideMe的div：

 <div class="square-container">
        <div class="square-smalls-container">
          <div class="slideMe small-eleven">
            <div class="text">
              <h3>+63.5%</h3>
              <p>more computer &amp; data processing <br/> services</p>
            </div>
          </div>
          <div class="slideMe small-twelve" id="small-twelve">
            <div class="text">
              <h3>+49.0%</h3>
              <p>other freight &amp; <br/>port services</p>
            </div>
          </div>
        </div>
          <div class="slideMe long-one">
            <div class="text">
              <h3>+247.9%</h3>
              <p>more film &amp; television <br/>distribution services</p>
            </div>
          </div>
        </div>
  </div>

和JS：

   <script>
   $(document).ready(function(){
      $( this ).scroll(function() {
        if ($(this).scrollTop() > 50){
        $( ".slideMe" ).slideDown( 5000, function(){
          console.log("scrolled!")
        })
        };
      });
    });
    </script>

Flexbox中的jQuery动画 - 动画未运行

1 个答案: