jQuery .slideUp() salta l'animazione

Sto lavorando a un'applicazione che mostra miniature di immagini che gli utenti hanno caricato fianco a fianco. Voglio essere in grado di mostrare l'immagine a dimensione intera e alcune informazioni a riguardo.jQuery .slideUp() salta l'animazione

La mia soluzione è far scorrere verso l'alto lo zoom #wrapper quando si fa clic sull'immagine per mostrare una pagina che mostra l'immagine a dimensione intera (magari attraverso l'aiuto di iframe, non ancora sicuro).

Sto provando a fare il primo passo di lavoro, ovvero scorrere su #wrapper. Il codice sotto dovrebbe funzionare, ma l'animazione scorrevole non viene mostrata - #wrapper scompare. Se rimuovo la classe .image dalle immagini e aggiungo la riga <p class="images">Test</p> e faccio clic, lo scorrimento funziona, ma le immagini non vengono stirate.

Quindi quale può essere il problema qui? Ho visto che ci sono un paio di domande con lo stesso argomento, ma tutte riguardano l'uso delle tabelle.

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

fonte

2012-05-13 holyredbeard

lo vedo animare: http://jsfiddle.net/YDeuR/ –

Non so se è perché le immagini non funziona. Il fatto è che se cambio la fonte delle immagini su un'immagine non esistente funziona anche per me, ma finché le immagini non vengono visualizzate, non funziona. Molto strano! – holyredbeard

Bene, allora puoi pubblicare un link ad un esempio in cui non funziona? Perché anche con le immagini esistenti esiste: http://jsfiddle.net/YDeuR/2/. Anche quale browser stai usando? – tw16

il suo lavoro bene per me (Chrome). ma provate questo:

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

fonte

2012-05-13 15:05:27

jQuery .slideUp() salta l'animazione

risposta

Problemi correlati