jQuery slideUp e slideDown di base mi fanno impazzire!

StackOverflow https://stackoverflow.com/questions/1092245

  •  11-09-2019
  •  | 
  •  

Domanda

Le mie abilità jQuery sono piuttosto buone normalmente, ma questo mi sta facendo impazzire!

È una fisarmonica abbastanza semplice che ho codificato da zero.Usando JQuery 1.3.2 in modo che non ci dovrebbero essere bug di salto, ma fondamentalmente se dai un'occhiata all'esempio:

http://www.mizudesign.com/jquery/accordian/basic.html

Sto mostrando l'altezza per il div target a destra - se contiene testo pensa che sia più corto di quanto non sia e salto.Se è un'immagine non c'è problema.

Non riesco a capire dove vado storto - è ovviamente nel CSS da qualche parte, ma ho provato tutti i soliti sospetti come il display: blocco

Tutte le idee sarebbero ricevute con gratitudine!

Tuo, Chris

PS Per favore perdona la natura del codice sorgente, l'ho strappato l'intero progetto a cui sto lavorando, quindi include alcuni div che non hanno davvero bisogno di essere lì.

È stato utile?

Soluzione

Hai bisogno di una larghezza o altezza sul contenuto per poter animare senza problemi.

Altri suggerimenti

Devo ammettere che ho trovato la mia stessa soluzione dinamica.

http://www.mizudesign.com/jquery/accordian/basic.html dovrebbe essere risolto.

E 'molto semplice, in realtà - aggiunge solo l'altezza usando css prima di nascondere il div. Funziona a meraviglia:) 

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();

Credo che il problema è che quando si aggiunge imbottitura o margine allora salta, questo è stato il caso per me. si deve animare il margine nella callback

Anche "tenere a mente" che le tabelle si comportano buggy con slideDown slideUp e piuttosto utilizzare fadeIn fadeOut

ottenere l'altezza una volta che il div ha terminato la sua animazione dal callback. E 'possibile che si sta ottenendo l'altezza, mentre il div è in corso di animazione, e si stanno ottenendo un valore di transizione.

Se l'animazione è jumpy, provare a utilizzare i callback. Non aprire un div e nascondere un div allo stesso tempo. Invece, nascondere il vostro primo div, e all'interno del callback mostrare il vostro prossimo div. 

$(".someDiv").slideUp("normal", function(){
  /* This animation won't start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

aggiornamento (Dai commenti):

  

redsquare: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

Ho anche avuto un problema slideUp() salto fastidioso che si è verificato il Safari, ma non cromato o IE. Si è scoperto che il tag div mi nascondevo / proiezione era proprio sotto un altro tag div che conteneva div float:left. Durante lo scorrimento in su, div galleggianti sarebbero momentaneamente nuovamente resi causando il salto.

La correzione è stata semplicemente aggiungendo clear:both allo stile del nascondiglio / che mostra div.

Il mio problema è che poiché ho a progettazione reattiva Non so quale sarà la larghezza o l'altezza del mio elemento.Dopo aver letto questo post sul blog http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm Mi sono reso conto che jQuery stava cambiando la posizione del mio elemento in fissa e stava rovinando il layout dell'elemento.Ho aggiunto quanto segue al mio CSS per l'elemento e non ho notato alcun effetto collaterale negativo in IE7+, Firefox, Chrome e Safari.

display: none;  
overflow: hidden;
position: relative !important;

La sostituzione valori margin-bottom margin-top e con i valori di padding-bottom padding-top e ha fatto il trucco per me. Non dimenticare di impostare il valore del margine a 0 dopo questo.

Questo ha funzionato per me: 

$(this).pathtoslidingelementhere.width($(this).parent().width());

Il problema è dovuto a IE (quirks mode), cercando di rendere "altezza: 0px".

La correzione: animare altezza a 1 (non 0), poi nascondere e ripristinare altezza: 

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

Per quanto mi riguarda, il problema era il margine (o padding) sul div per mostrare / nascondere con scivolo, ma avevo bisogno di dare margine (o padding) a quella div. Ho risolto con questo trucco: 

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top