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>

jQuery .slideUp（）跳过动画

1 个答案: