Effetto slidedown non funzionante su chiamata ajax

[deleted_193]

Salve, vorrei che l'elemento #nuovo uscisse fuori con un effetto slideDown, al momento ho questo codice non funzionante:

	  success: function (html) {
		$('#nuovo').after(html);
		$('#nuovo').slideDown("slow");
	        }

Ho provato anche in questi altri modi:

		$('#nuovo').slideDown(10000).after(html);
		$('#nuovo').after(html).slideDown(10000);

Qualcuno potrebbe indicarmi la sintassi corretta?

P.S. Su internet trovo solo esempi con il classico bottone, mentre questo è riferito ad una chiamata che invia dati al submit.

[lucavizzi]

Devi usare html(), non after() altrimenti il responso della chiamata viene inserito DOPO #nuovo e non DENTRO.

[deleted_193]

Non credo sia questa la soluzione, comunque ho provato e non funziona.
After è stato inserito per far andare ad ogni invio del submit il nuovo contenuto del div sopra quello stampato prima, altrimenti viene sovrascritto di continuo, anche se nel database poi viene effettivamente passato.
Comunque mettendo html l'effetto non si attiva lo stesso.
Altre idee?

[lucavizzi]

Se non vuoi sovrascrivere, puoi usare append(). Non ha senso usare $('#nuovo').after() e poi $('#nuovo').slideDown()

[deleted_193]

Con append mi vanno l'uno sotto l'altro, mentre vorrei che andassero l'uno sopra l'altro, per questo ho cambiato con after, il problema è che cambiare quella riga non mi crea l'effetto voluto, eppure dovrebbe essere così la soluzione.
Nessun rallentamento nella comparsa, provo a ricercare in rete, ma ho già provato e a parte l'onclick non c'è nulla.

[lucavizzi]

Se vuoi impilarli, puoi usare prepend().

Più che un problema di sintassi javascript, sembra un problema di CSS.
Prova a wrappare, il responso della chiamata, in un div con display:none prima di aggiungerlo al DOM.
Usa una classe per applicare il display:none al div contenitore poi fai lo slideDown su quella classe.

[deleted_193]

In merito alla ua analisi ho provato a farlo con i css(con una breve ricerca su google ho trovato questo esempio):

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    document.getElementById('test').className = 'slideDown';
  }, 0);
}, false);
</script>
<style type="text/css">
#test {
	width: 200px;
	padding: 0;
	visibility: hidden;/*è questo elemento che impedisce la stampa*/
}

.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 5s;	/*questa è solo la durata dell'animazione*/
	-webkit-animation-duration: 5s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
</style>
	<div id="test">

</div>

Ho fatto un semplice copia e incolla per vedere il funzionamento, ovvero se era applicabile al mio caso, e ho notato una aniomalia: se richiamo la pagina da indirizzo ottengo un'animazione corretta, se invece la richiamo tramite chiamata ajax(come devo fare obbligatoriamente), l'animazione non si verifica e stampa semplicemente a video quello che vede.
Ho modificato la durata dell'animazione mettendola a 5s per vedere se c'era un problema di ritardo, ma invece non c'è. Ultimo si deve tener conto che tutto questo contenuto è nella pagina richiamata dalla chiamata ajax che è perfettamente funzionante.
C'è un motivo per cui questi effetti non funzionano?

[deleted_193]

Ho capito il problema, adesso questa discussione la chiudo e ne apro un'altra su un problema che si è manifestato per il css, grazie per l'aiuto, sei stato gentilissimo.

[lucavizzi]

Veramente non ho mai parlato di usare i CSS3 per fare lo slideDown...
Prova così e dimmi se va:

success: function (html) {
		$('#nuovo').prepend('<div class="idClass" style="display:none">'+html+'</div>');
		$('.idClass').slideDown("slow");
	        }

[deleted_193]

Ok, non avevo capito, pensavo che mi avessi detto di ricrearlo con i css per farlo funzionare.
Comunque nel modo in cui hai scritto tu funziona.
Grazie ancora dell'aiuto.