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

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

你正在通过它的 id 滑动一个 div

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

不知道你为什么期望别人搬家。检查您的 jQuery 选择器。这与 flexbox 无关 :-)

在一些 div 中添加了 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>