Slideshow e Posizionamento DIV

[Guido84]

Salve ragazzi e come sempre complimenti,

sto realizzando una semplice struttura con header, menu sulla dx, div centrale per galleria fotografica etc etc...
Il problema sorge proprio nella galleria fotografica dove quando scorro le immagini queste ultime "saltano" prima di entrare in posizione, penso sia un problema di CSS.
Da quello che ho capito la foto entra prima che l'altra scompare quindi mettendosi sotto e poi entra in posizione, ma non capisco come ovviare se non giocando sui tempi di transizione.

Un esempio si puo vedere sul sito provaguido.altervista.org
entrando in menu e poi prova, premendo nex o prev si nota il difetto,
se potete darmi qualche dritta vi sarei mooooolto grato.

<! slide container >
            <div id ="slide">     
                 
            <img id="first" src="menu/1.jpg" width="349" height="550"  alt="animation" /> 
             
            <div id="uovo">
            <div id="top">      
			<a id="frp" href="javascript:prev()" > prev </a> 
			<a id="frn" href="javascript:nex()"  > next </a>                      
			</div>  
            <div class='slideshow'>
            <img class="1" src="uovo/1.jpg"  width="349" height="550"  alt="animation"  />
            <img class="1" src="uovo/2.jpg"  width="349" height="550"  alt="animation" style="display:none" />
            <img class="1" src="uovo/3.jpg" width="550" height="349"  alt="animation" style="display:none"/>
 
            </div>          
            </div>                  
            </div>

CSS:

#container { width:960px; margin:0 auto; padding:10px ; height:100%  }

#header { width:960px; padding-top:5px; padding-bottom:10px; }



#slide { width:600px; height:550px; 
		float:left; margin:0 auto; 
		text-align:center; }	

#footer { width:960px; clear:both; padding-top: 15px; color:#666; border-top:#CCC 1px solid} 
#footer_space { width:960px; clear:both; height:15px; }
a:hover { color:#CCC;}

#uovo {float:left; width:550px; height:550px; display:none;}

.slideshow img { margin:0 auto;  }

Jquery:

<script type="text/javascript">
 function photo(name) {
	 
	  $("#first").css("display","none");
	  $(name).css("display","block").fadeIn("slow");
	   
	 }

	function nex() {
     $("#uovo .slideshow img:first-child").fadeOut().next().fadeIn().end().appendTo('.slideshow');	  
			}
		
	function prev() {
    $("#uovo .slideshow img:first-child").css("display","none");
    $("#uovo .slideshow img:last-child").prependTo('.slideshow').fadeOut(500);
    $("#uovo .slideshow img:first-child").fadeIn(500);	
	}
</script>

Grazie in anticipo a tutti.

Guido.

 

[Max 1]

Secondo me non è un problema di CSS ma di JS. Non è detto che funzioni ma prova cambiare i valori di fadein e fadeout mettendoli diversi magari più lungo fadein

 

[Guido84]

Ciao e grazie, ho provato e se cambio ad esempio il fadeout con .css(display:none) e allungo il fadeout ad esempio a 500 il difetto scompare, ma ero convinto che ci fosse un problema di posizionamento div, magari riuscire ad usare un position absolute nel float centrale ma non riesco.

Grazie

 

[cory]

prova a dare overflow: hidden
a uovo

 

[Guido84]

Ciao cory e grazie.. si con overflow il difetto è tolto, :beer:
volevo chiederti comunque se è giusto fare così o c'è comunque qualche errore strutturale nel layout che ha causato questa cosa.

Grazie
Guido.

 

[cory]

nessun errore
non sono esperto di javascript ma credo che agisca su opacity per fare il fade in/out
ma per farlo cambia l'immagine da display none a block
e quindi il div si allunga anche solo per una frazione di secondo
causando il saltello che dici

 

[Guido84]

Grazie [emoji6]

 

[Max 1]

nessun errore
non sono esperto di javascript ma credo che agisca su opacity per fare il fade in/out
ma per farlo cambia l'immagine da display none a block
e quindi il div si allunga anche solo per una frazione di secondo
causando il saltello che dici

Quindi come avevo detto io non è un problema di css ma di JS

 

[Guido84]

Alla fine sto usando entrambi i metodi, ho allungato i tempi di ingresso delle img e aggiunto anche l' overflow hidden al div contenitore, ora mi resta solo un micro spostamento delle foto quando si visualizza e sto cercando di capire.

Gracias....