jQuery .slideUp() bỏ qua hoạt ảnh

Question

Tôi đang làm việc trên một ứng dụng hiển thị hình thu nhỏ của hình ảnh mà người dùng đã tải lên cạnh nhau. Tôi muốn có thể hiển thị hình ảnh kích thước đầy đủ cũng như một số thông tin về nó.

Giải pháp của tôi là để #wrapper trượt lên khi một hình ảnh được nhấp để hiển thị một trang hiển thị hình ảnh có kích thước đầy đủ (có thể thông qua sự trợ giúp của iframe, chưa chắc chắn).

Tôi đang cố gắng thực hiện bước đầu tiên, ví dụ: trượt lên #wrapper. Mã bên dưới sẽ hoạt động nhưng hoạt ảnh trượt không được hiển thị - #wrapper chỉ biến mất. Nếu tôi xóa lớp .image khỏi các hình ảnh và thêm dòng <p class="images">Test</p> và nhấp vào đường đó, công trình trượt, nhưng sau đó hình ảnh sẽ không bị cản trở.

Vậy vấn đề ở đây có thể là gì? Tôi đã thấy có một vài câu hỏi có cùng chủ đề, nhưng tất cả chúng đều sử dụng các bảng.

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

công việc của mình tốt cho tôi (Chrome). nhưng hãy thử điều này:

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