jQuery .slideUp() omite la animación

Question

Estoy trabajando en una aplicación que muestra miniaturas de imágenes que los usuarios han subido una al lado de la otra. Quiero poder mostrar la imagen a tamaño completo, así como información sobre ella.

Mi solución es hacer que el #wrapper se deslice hacia arriba cuando se hace clic en una imagen para mostrar una página que muestra la imagen a tamaño completo (quizás con la ayuda de iframes, aún no estoy seguro).

Estoy tratando de obtener el primer paso para trabajar, es decir, deslizando hacia arriba #wrapper. El siguiente código debería funcionar, pero la animación deslizante no se muestra: #wrapper simplemente desaparece. Si elimino la clase .image de las imágenes, y agrego la línea <p class="images">Test</p> y hago clic en ella, el deslizamiento funciona, pero luego las imágenes quedan sin estilo.

¿Cuál puede ser el problema aquí? He visto que hay un par de preguntas con el mismo tema, pero todas tratan de usar tablas.

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

su buen trabajo para mí (Chrome). pero intente esto:

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