jQuery .slideUp() пропускает анимацию

Question

Я работаю над приложением, которое показывает эскизы изображений, которые пользователи загрузили бок о бок. Я хочу, чтобы показать полное изображение, а также некоторую информацию об этом.

Мое решение состоит в том, чтобы при нажатии на изображение было нажато #wrapper, чтобы отобразить страницу, на которой отображается полноразмерное изображение (возможно, с помощью iframe, еще не уверен).

Я пытаюсь сделать первый шаг, работающий, то есть скользящий вверх #wrapper. Код ниже должен работать, но скользящая анимация не отображается - #wrapper просто исчезает. Если я удалю класс .image с изображений и добавлю строку <p class="images">Test</p> и щелкните по нему, скользящие работы, но тогда изображения будут нестированы.

В чем проблема? Я видел, что есть пара вопросов с одной и той же темой, но все они касаются использования таблиц.

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

свою работу хорошо для меня (Chrome). но попробуйте это:

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