jQuery .slideUp（）はアニメーションをスキップします

Question

私はユーザーが並べてアップロードした画像のサムネイルを表示するアプリケーションに取り組んでいます。フルサイズの画像とそれに関する情報を表示したい。

画像をクリックしてフルサイズの画像を表示するページが表示されたら、#wrapperをスライドさせて解決することです（iframeの助けを借りて、おそらくまだわかりません）。

私は、最初のステップ、すなわち#wrapperをスライドさせることを試みています。下のコードはうまくいくはずですが、スライドアニメーションは表示されません。#wrapperは表示されません。イメージからクラス.imageを削除して、行<p class="images">Test</p>を追加してクリックすると、スライドは機能しますが、イメージは表示されません。

ここで何が問題になりますか？私は、同じトピックで2,3の質問があることを見てきましたが、それらのすべてがテーブルの使用に関するものです。

HTML：

<section id="wrapper"> 
    <div id="blogs"> 
     <div class="blog"> 
     <div class="post"> 
      <img class="images" src="images/image1.png" /> 
      </div> 
     </div> 
     <div class="blog"> 
     <div class="post"> 
      <img class="images" src="images/image2.png" /> 
      </div> 
     </div> 
     <div class="blog"> 
     <div class="post"> 
      <img class="images" src="images/image2.png" /> 
      </div> 
     </div> 
    </div> 
</section> 

のjQuery：

$('.images').click(function(){ 
    $('#wrapper').slideUp('slow', function() { 
    }); 
}); 

CSS：

#wrapper { 
    background: yellow; 
    margin: 0px auto; 
    width: 100%; 
    height: 1000px; 
    position: relative; 
    top: -20px; 
    left: 20px; 
    text-align: left; 
    margin: 0px auto; 
    padding: 10px; 
} 

.post { 
    background: white; 
    width: 200px; 
    height: 220px; 
    margin: 0px auto; 
    float: left; 
    margin-right: 30px; 
    margin-bottom: 30px; 
    position: relative; 
    padding: 5px; 
    -moz-box-shadow: 0 0 4px 1px #777; 
    -webkit-box-shadow: 0 0 4px 1px#777; 
    box-shadow: 0 0 4px 1px #777; 
} 

.images { 
    margin-left: 5px; 
    margin-top: 5px; 
    width: 188px; 
    height: 170px; 
    border: 1px solid #aaa; 
    border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
} 

.blogs { 
    height: 400px; 
} 

Answer 1

私のためにその作業良い（クローム）。しかし、この方法を試してください。

<section id="wrapper"> 
    <div id="blogs"> 
     <div class="blog"> 
      <div class="post"> 
       <span class="images"> 
        <img src="images/image2.png" alt="" > 
       </span> 
      </div> 
     </div> 
    </div> 
</section>