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（）跳過動畫

回答

相關問題