jQuery .slideUp()跳过动画

Question

我正在开发一个应用程序,显示用户并排上传的图像的缩略图.我希望能够显示完整尺寸的图像以及有关它的一些信息.

我的解决办法是让#wrapper向上滑动点击的图像揭示一个网页,其中显示了全尺寸的图像(也许通过I帧的帮助下,目前还不能确定)时.

我正试图让第一步工作,即向上滑动#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>