jQuery .slideUp() überspringt die Animation

Ich arbeite an einer Anwendung, die Miniaturansichten von Bildern zeigt, die Benutzer nebeneinander hochgeladen haben. Ich möchte in der Lage sein, das Bild in voller Größe sowie einige Informationen darüber zu zeigen.jQuery .slideUp() überspringt die Animation

Meine Lösung ist die #wrapper Folie nach oben, wenn ein Bild angeklickt wird, um eine Seite anzuzeigen, die das Bild in voller Größe zeigt (vielleicht mithilfe von iframes, noch nicht sicher).

Ich versuche, den ersten Schritt arbeiten, d. H. Gleiten #wrapper. Der folgende Code sollte funktionieren, aber die gleitende Animation wird nicht angezeigt - #wrapper verschwindet einfach. Wenn ich die Klasse .image aus den Bildern entferne und die Zeile <p class="images">Test</p> hinzufüge und auf sie klicke, funktioniert das Verschieben, aber dann werden die Bilder unstrukturiert.

Also was kann das Problem hier sein? Ich habe gesehen, dass es ein paar Fragen mit dem gleichen Thema gibt, aber bei allen geht es um die Verwendung von Tabellen.

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

Quelle

2012-05-13 holyredbeard

Ich sehe es animieren: http://jsfiddle.net/YDeuR/ –

Ich weiß nicht, ob es daran, dass die Bilder nicht funktioniert. Das heißt, wenn ich die Quelle für die Bilder in ein nicht vorhandenes Bild ändere, funktioniert es auch für mich, aber solange die Bilder angezeigt werden, funktioniert es nicht. Sehr eigenartig! – holyredbeard

Nun, können Sie einen Link zu einem Beispiel posten, wo es nicht funktioniert? Denn auch mit Bildern, die es gibt, funktioniert es: http://jsfiddle.net/YDeuR/2/. Welchen Browser benutzen Sie auch? – tw16

seine Arbeit gut für mich (Chrom). aber versuchen Sie dies:

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

Quelle

2012-05-13 15:05:27

jQuery .slideUp() überspringt die Animation

Antwort

Verwandte Themen