FlexboxのjQueryアニメーション - アニメーションが実行されていない

Question

Flexboxを使用して印刷イメージを複製し、ページが特定のポイントまでスクロールしたときに各四角形が最も高いコンテナdivの上から下にスライドするように四角形divのグリッドを作成しました。私はコンソールログを実行しているので、ブラウザが.scroll関数を取得していることは分かっていますが、これは起動しません。私はこの時点で1つのdivをスライドさせるように働いています。 Flexboxは超厳密ですか、何か不足していますか？ここにコードがあります。あなたが移動するために他人を期待し、なぜあなたはそれのid

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

わからないで1つのdiv要素をスライドさ

<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

。 jQueryセレクタを確認してください。

<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>