Animazione 2 Div

[danlupo]

Salve,

vorrei creare un effetto Fade Out Fade In su due div, in pratica mentre il div intro scompare, il div contenitore viene visualizzato.

Ho provato ad utilizzare Hide e Show ma rimane la schermata nera per un pò di tempo e poi compare di colpo il div, se allungo il ritardo del secondo div mi rimane lo stesso la schermata nera e mi compare solo più lentamente il 2° Div

Ho provato anche ad utilizzare ANIMATE con il primo con parametro opacity a 0 (e funziona) ed il secondo con opacity a 1 o a 100% (e non funziona lasciandomi la schermata nera).

Possibili Suggerimenti.

Grazie Daniele

[yujin]

puoi copiare il codice che stai usando?

se puoi usa jsfiddle così si può testare

[Virus_101]

Il concetto e' :

1- i due div partono cosi'

<div id="container" style="position:relative;display:block;width:300px;height:300px;">
   <div id="div1" style="display:none;position:absolute;top:0;left:0;width:300px;height:300px;background-color:red"></div>
   <div id="div2" style="display:none;position:absolute;top:0;left:0;width:300px;height:300px;background-color:red"></div>
</div>

2- poi in js+jquery

$(document).ready(function(){

var d1 = $("#div1");
var d2 = $("#div2");

d1.css({ display:"none",opacity:0 }) ;
d2.css({ display:"none",opacity:0 }) ;

// accendiamo il primo div
$("#div1").stop().animate({opacity:1,zIndex:10},slow,function(){
    //esecuzione callback di animazione crossfade
    d2.stop().animate({opacity:1,zIndex:15}) ;
})

})

Ora questo accende il primo div e poi sopra gli mette il secondo.
Se vuoi generalizzare oltre questo esempio base ti consiglio di :

1- impostare l'array con i contenuti che vuoi mettere in cross-fade (anche leggendlosi dal div stesso
2- impostare la corretta funzione con relativi timer e callbacks

[yujin]

una piccola correzione al codice di virus

se entrambi hanno display none non si vedono, slow è una stringa e opacity con i css dovrebbe essere dato in compatibilità tra i browser mentre jquery se ne occupa da solo

puoi provare il codice qua
http://jsfiddle.net/tWpTB/

premi run in alto a sinistra

la schermata nera appare in questo caso perchè ne fai sparire uno e comparire un altro e tra i due rimane lo spazio vuoto

ti basta spostare il div che vuoi in foreground ad un z-index maggiore con opacity 0 e in seguito farlo apparire

prova sostituendo nell'esempio
$("#div1").stop().animate({opacity:0.01,zIndex:10} ,'slow',function(){
//esecuzione callback di animazione crossfade
d2.stop().animate({opacity:0.99,zIndex:15}) ;
})​

con

d2.stop().animate({opacity:0.99,zIndex:15}, 3000) ;​​​​​​​

[Virus_101]

Si giusto ho dimenticato di mettere un apio di istruzioni scusate

$(document).ready(function(){

var d1 = $("#div1");
var d2 = $("#div2");

d1.css({ display:"block",opacity:0 }) ;
d2.css({ display:"none",opacity:0 }) ;

// accendiamo il primo div
$("#div1").stop().animate({opacity:1,zIndex:10},slow,function(){
    //esecuzione callback di animazione crossfade
    d2.css({display:block})
    d2.stop().animate({opacity:1,zIndex:15}) ;
})

})