Transizione slide, rallentato

[dimoshake]

Ho creato una slide e funziona correttamente, soltanto che su ie e firefox a volte si rallenta una transizione: l'effetto "forbice" (non sono bravo a dare i nomi)

//EFFETTO FORBICE//

//Effetto: Suddivisione in rettangoli alti e stretti, che dividono lo slide in 9 parti, partendo da //destra e con opacità 0 vengono a sinistra uno dietro l'altro
    function effettoforbice(quale){
    document.getElementById('slide'+quale).style.zIndex="1";
    document.getElementById('slide'+quale).style.opacity= '1.0';
    document.getElementById('slide'+quale).style.filter="alpha(opacity=100)";

    document.getElementById('slide'+quale).style.backgroundImage= 'url(togliere.jpg)';
    tempotransizione = 1800; //tempo transizione

    clonediv ="";
    i = 0;
    while(i<10){
    leftback = i*70;
    left = 315+leftback //315 meta di 630, meta dello slide;
    clonediv = clonediv+"<div id='clonediv"+i+"' class='divcloneforbici' style='left:"+left+"px;opacity:0.0;filter:alpha(opacity=00);background: url(image/slideshow/"+quale+".jpg) -"+leftback+"px 0px'></div>";
    i++;
    }
    document.getElementById('slide'+quale).innerHTML = clonediv;
    i = 0;

    globe(0,120);

    setTimeout(function (){riazzera(quale)},tempotransizione);
    rinnova(quale);
    

    }

    function settime(s,u){
    s = parseInt(s);
    if(s == 10){
    document.getElementById('clonediv'+u).style.opacity= '1.0';
    document.getElementById('clonediv'+u).style.filter="alpha(opacity=100)"
    }else{
    document.getElementById('clonediv'+u).style.opacity= '0.'+s;
    document.getElementById('clonediv'+u).style.filter="alpha(opacity="+s+"0)"
    }
    s++;
    if(s != 11){
    setTimeout(function (){settime(s,u)},50);
    }
    }

    function setleft(l,u,ar){
    l = parseInt(l);
    document.getElementById('clonediv'+u).style.left= l+"px";
    l = l-5;
    if(l > ar){
    setTimeout(function (){setleft(l,u,ar)},1);
    }
    }

    function globe(g,temp){
    lefta = document.getElementById('clonediv'+g).style.left;
    lefta = parseInt(lefta);
    ar = lefta-320;
    temp = temp;
    setleft(630,g,ar);
    settime(0,g);
    g++;
    if(g != 10){
    setTimeout(function (){globe(g,temp)},temp);
    }
    }
    
    function riazzera(quale){
    document.getElementById('slide'+quale).innerHTML = "";
    document.getElementById('slide'+quale).setAttribute('class','slider');
    document.getElementById('slide'+quale).style.backgroundImage= 'url(image/slideshow/'+quale+'.jpg)';
    }
    } 

Ecco il link della slide: http://dimoshake.altervista.org/Game-Station/pc.php

[manu27c27]

veramente complimenti per il lavoro... io l'ho provato su tutti i browser ma non ho notato questo "effetto forbice"...
sei sicuro che non dipenda dal tuo pc?

[dimoshake]

Ho settato la slide, ora si dovrebbe vedere solo quel effetto. Prova a visualizzarlo prima con chrome, e poi con ff e ie

[Plopper]

L'errore è dovuto all'utilizzo dei pixel sulla variabile di stile left nel ciclo
dove dichiari i div cloni, infatti i pixel si adattano alla misura dello zoom
quindi si sovrappongono durante lo slider, dovresti usare la percentuale

[cavicchiandrea]

A parte che hai quest'errore

Dettagli errore pagina Web

Agente utente: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E; InfoPath.3)
Timestamp: Thu, 5 Apr 2012 07:00:10 UTC
Messaggio: Necessario oggetto
Linea: 323
Carattere: 2
Codice: 0
URI: http://dimoshake.altervista.org/Game...s/slideshow.js

Per questo tipo di transizioni usa jquery

[dimoshake]

@cavicchiandrea jquery? Non ci provo gusto ad usarlo
@plopper Ho visto, in effetti se aumento lo zoom della pagina rallenta tutto, tuttavia non ho capito dove inserire la %

[Plopper]

Originariamente inviato da dimoshake
@cavicchiandrea jquery? Non ci provo gusto ad usarlo
@plopper Ho visto, in effetti se aumento lo zoom della pagina rallenta tutto, tuttavia non ho capito dove inserire la %

Usa la % come unità di misura, per intenderci ridichiara left e leftback nel ciclo
e metti a left in % in modo che si adatti allo zoom, questo metodo funziona
se anche gli altri div sono in % sennò puo non funzionare ciao e fammi sapere

[dimoshake]

ah ho capito... ci provo

[dimoshake]

Non sono le percentuali.. ho provato a sistemarlo molto grezzamente (non è molto preciso il calcolo) e mentre su chrome si vede molto fluido (anche su safari) su firefox si vedono tutti ammassati i div cloni. Ho notato una cosa.. la prima volta che si effettua la transizione su firefox si vede bene.. dalla seconda in poi i div cloni si ammassano
Che fare?
EDIT: il problema è anche su opera

[dimoshake]

Avete qualche idea?