jQuery .slideUp（）跳过动画

我正在研究一个应用程序，它显示用户并排上传图像的缩略图。我希望能够显示全尺寸图像以及关于它的一些信息。jQuery .slideUp（）跳过动画

我的解决方案是让#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; 
}

来源

2012-05-13 holyredbeard

我看到了动画：http://jsfiddle.net/YDeuR/ –

我不知道这是否是因为图像是行不通的。事情是，如果我将图像的源代码更改为不存在的图像，它也适用于我，但只要图像被隐藏，我就不起作用。很奇怪！ – holyredbeard

那么，你可以发布一个链接到一个不工作的例子吗？因为即使存在的图像它的作品：http://jsfiddle.net/YDeuR/2/。你还使用什么浏览器？ – tw16

的工作对我好（铬）。但试试这个：

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

来源

2012-05-13 15:05:27

jQuery .slideUp（）跳过动画

回答

相关问题