jQuery .slideUp() एनीमेशन

Question

छोड़ देता है मैं एक ऐसे एप्लिकेशन पर काम कर रहा हूं जो उपयोगकर्ताओं द्वारा देखी गई छवियों के थंबनेल दिखाता है। मैं पूर्ण आकार की छवि के साथ-साथ इसके बारे में कुछ जानकारी दिखाने में सक्षम होना चाहता हूं।

मेरा समाधान #wrapper स्लाइड करना है जब एक छवि को एक पृष्ठ प्रकट करने के लिए क्लिक किया जाता है जो पूर्ण आकार की छवि दिखाता है (शायद iframes की सहायता के माध्यम से, अभी तक सुनिश्चित नहीं है)।

मैं पहला कदम प्राप्त करने की कोशिश कर रहा हूं यानी #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() { 
    }); 
}); 

सीएसएस: मेरे लिए

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