jQuery .slideUp() pomija animację

Question

Pracuję nad aplikacją, która pokazuje miniatury obrazów, które użytkownicy przesłali obok siebie. Chcę być w stanie pokazać obraz w pełnym rozmiarze, a także kilka informacji na jego temat.

Moim rozwiązaniem jest przesuwanie się po kliknięciu obrazu, aby wyświetlić stronę pokazującą obraz w pełnym rozmiarze (być może za pomocą ramek iframe, jeszcze nie jestem pewien).

Próbuję wykonać pierwszy krok, tzn. Przesuń w górę #wrapper. Poniższy kod powinien zadziałać, ale animacja przesuwania się nie pokazuje - #wrapper po prostu znika. Jeśli usuniemy klasę .image z obrazów i dodam linię <p class="images">Test</p> i kliknę ją, przesuwanie działa, ale wtedy obrazy zostaną zlikwidowane.

Więc jaki może być problem? Zauważyłem, że jest kilka pytań dotyczących tego samego tematu, ale wszystkie dotyczą używania tabel.

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

jego dobra praca dla mnie (Chrome). ale spróbuj tego:

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