jQuery .slideUp() skips the animation

Question

I'm working on an application which shows thumbnails of images users have uploaded side by side. I want to be able to show the full size image as well as some information about it.

My solution is to have the #wrapper slide up when an image is clicked to reveal a page which shows the full size image (maybe through the help of iframes, not sure yet).

I'm trying to get the first step working i.e. sliding up #wrapper. The code below should work, but the sliding animation isn't shown - #wrapper just disappears. If I remove the class .image from the images, and add the line <p class="images">Test</p> and click it, the sliding works, but then the images get unstyled.

So what can be the problem here? I have seen there are a couple of questions with the same topic, but all of them are about using tables.

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

Bonham

I see it animate: jsfiddle.net/YDeuR – Leonoraleonore

I don't know if it's because the images isn't working. Thing is that if I change the source for the images to a non existing image it works for me too, but as long as the images is diplayed i doesn't work. Very strange! – Bonham

Well then, can you post a link to an example where it is not working? Because even with images that exist it works: jsfiddle.net/YDeuR/2. Also what browser are you using? – Crispen

Did you work out what the problem was? – Crispen

Answer 1

its work good for me (Chrome). but try this :

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

Allometry