jquery rollover + tooltip

[magis]

Ciao ragazzi...
premettendo che le ho provate tutte.. sono un neofita e non so più dove battere la testa...

http://www.obiproject.com/prova.htm

su quasi tutti i browser principali non dà problemi (a parte su opera che sembra un po' scattoso), mentre su explorer 6 e 7 (sull'8 funziona) il meccanismo si inceppa subito: praticamente funziona al primo rollover e poi basta...

immagino sia un problema del javascript...

qualcuno sa darmi aiuto e/o consiglio?

grazie
magis

function init_hover() {
//se l'elemento non esiste non fare nulla
if(!$('#iconbar').length){return;}
//applichiamo l'hover agli elementi della lista
$('#iconbar li')
.css('cursor','pointer') //fa uscire la manina 

.hover(function() {    
$(this).siblings('li') //trova tutti gli elementi li allo stesso livello
.stop() //ferma l'animazione se è in corso
.animate({'opacity':0.5}); //porta l'opacità al 30%

$(this).find("div.sopra").attr({
"style": 'display:inline'
});

$(this).find("div.sopra").animate({opacity: 1, top: "-40"}, {queue:false, duration:400});

$(this).find("div.sotto").attr({
"style": 'display:inline'
});
$(this).find("div.sotto").animate({opacity: 1, top: "115"}, {queue:false, duration:400});

},function(){
$(this).siblings('li') //idem come sopra
.stop() //idem come sopra
.animate({'opacity':1}); //porta l'opacità ad 1

$(this).find("div.sopra").animate({opacity: 0, top: "-30"}, {queue:false, duration:400}, "linear",
function(){
$(this).find("div.sopra").attr({"style": 'display:none'});    
}
);
$(this).find("div.sotto").animate({opacity: 0, top: "105"}, {queue:false, duration:400}, "linear",
function(){
$(this).find("div.sotto").attr({"style": 'display:none'});    
}
);
});
}

$(document).ready(function(){
init_hover(); //fa partire la funzione al caricamento della pagina
}); 

[simotenax]

per caso sai dirmi che se e che errori ti da su ie 6-7? (ora non ho disponibile la VM con windows)

il codice non sembrerebbe aver nulla di strano..

[magis]

non mi dà nessun errore in particolare...
semplicemente dopo il primo rollover su un box colorato, se passo con il mouse sugli altri continua a funzionare il cambio di opacità, ma non mi visualizza più le scritte "testo sopra" e "testo sotto"...

[Senamion]

E' possibile che sia solo un problema di lentezza, potresti provare a sostituire gli animate con css, o mettere un timeout dell'animate bassissimo e vedere se funziona (a parte l'effetto).
Poi potresti ottimizzare il codice, tipo questo:

$(this).find("div.sopra").attr({ 
"style": 'display:inline' 
}); 

$(this).find("div.sopra").animate({opacity: 1, top: "-40"}, {queue:false, duration:400});

potresti scriverlo così:

$(this).find("div.sopra").show().animate({opacity: 1, top: "-40"}, {queue:false, duration:400});

[Senamion]

Tieni conto che fermi l'animazione (con stop()) sui li ma non su sopra e sotto!

[magis]

grazie senamion... ma niente... non riesco a venirne a capo... nessuno riesce a suggerirmi una soluzione.... please... :master:

function init_hover() {
    //se l'elemento non esiste non fare nulla
    if(!$('#iconbar').length){return;}
    //applichiamo l'hover agli elementi della lista
    $('#iconbar li')
    .css('cursor','pointer') //fa uscire la manina 
    
    .hover(function() {        
        $(this).siblings('li') //trova tutti gli elementi li allo stesso livello
        .stop() //ferma l'animazione se è in corso
        .animate({'opacity':0.5}); //porta l'opacità  al 30%
        
        $(this).find("div.sopra")
        .stop()
        .show()
        .animate({'opacity': 1, 'top': -40}, {queue:false, duration:400});
        
        $(this).find("div.sotto")
        .stop()
        .show()
        .animate({'opacity': 1, 'top': 115}, {queue:false, duration:400});
        
    },function(){
        $(this).siblings('li') //idem come sopra
        .stop() //idem come sopra
        .animate({'opacity':1}); //porta l'opacità  ad 1
        
        $(this).find("div.sopra")
        .stop()
        .show()
        .animate({'opacity': 0, 'top': -30}, {queue:false, duration:400});
        
        $(this).find("div.sotto")
        .stop()
        .show()
        .animate({'opacity': 0, 'top': 105}, {queue:false, duration:400});
    });
}

$(document).ready(function(){
    init_hover(); //fa partire la funzione al caricamento della pagina
}); 

[magis]

il problema sta nel fatto che su explorer 6 e 7 il tooltip è come se fosse visualizzato all'esterno della (chiamiamola così) maschera formata dal box e di conseguenza non si vede... cosa strana è che se tolto l'effetto di opacità funziona normalmente...

ho provato a sistemare il css con gli z-index ma nulla...

dato che le cose separate funzionano (opacità e tooltip), per non impazzire ho pensato di togliere l'effetto di opacità... ma esiste un metodo per switchare il file .js in base alla versione del browser utilizzata?

ditemi di si...
grazie e buona pasqua...

francesco