[jQuery] Div fadeIn-Out

[Fatum]

Ciao a tutti,

sto impazzendo dietro ad uno stupido script jquery.
Ho un div con un'immagine, ho bisogno che al passaggio del mouse
appaia del testo. Poi, quando toglierò il mouse dovrà tornare l'immagine.

Potete vedere tutto qui: http://www.publifutura.it/index2.htm

Come si può notare pare funzionare. Se però si passa velocemente il mouse il testo appare sotto l'immagine e ci rimane..

Vi posto il css e lo script jQuery:

	$('#wrap').mouseenter(
        function(){
                $('#wrap .image').fadeOut(500, function(){
			$('#wrap1 .text').css('display', 'inline');                                         
                        $('#wrap .text').fadeIn(500);   
                });
        }
        );
	
	$('#wrap').mouseleave(
        function(){
                $('#wrap .text').fadeOut(500, function(){
			$('#wrap1 .text').css('display', 'none');                                         
                        $('#wrap .image').fadeIn(500);                                           
                });
        }
        );

Il css della classe text che è impostato inizialmente a none:

.text{
	display: none;
}

Perchè fa così??

[Mattia Vio]

non puoi metterli legati all'evento mouseover ?

io darei un id all'immagine e un id alla textarea col testo es id="img1" e id="text1"

img id="img1"
textarea id="text1" style="display:none"

metti tutti e due dentro lo stesso div in questo modo in partenza avrai l'immagine visibile e il testo invisibile

metti sul div contenitore un bell' onmouseover tipo

<div id="contentitore" onmouseover="hide_dehide_img()">


function hide_dehide_img(){
if ($('#img1').css('display') == 'none') {
$('#img1').css('display','');
$('#text1').css('display','none');
}
else {
$('#img1').css('display','none');
$('#text1').css('display','');
}
}


cosi in teoria passandoci sopra fa sparire una e comprarire l'altra..

magari prova a mettere 'display','' al posto di 'display','inline'

[Fatum]

Sono un pirla ho messo tutto tranne l'html!
Io ho già la stessa struttura che hai detto tu:

<div id="wrap">
    <div class="image">
           [img]images/puzzle1.png[/img]</p>
    </div>
    <div class="text">
        blabla
    </div>
</div>

E anche lo script mi sembra abbastanza simile!
Eppure si comporta in quel modo strano se si passa velocemente..

[Fatum]

Risolto aggiungendo un if:

	$('#wrap').mouseenter(
        function(){
                $('#wrap .image').fadeOut(500, function(){
			$('#wrap .text').css('display', 'inline');                                         
                        $('#wrap .text').fadeIn(500);
				if($('#wrap .text').css('display') == 'inline') { 
					$('#wrap .image').css('display','none'); 
				} 
                });
        }
        );

[cavicchiandrea]

Originariamente inviato da Fatum
Risolto aggiungendo...

Dici nel esempio (dove mi sembra tu abbia fatto la modifica) il primo box si blocca e gli altri due il problema persiste sito visitato con ff 3.6 Mec S.O. 10.6

[Fatum]

In effetti non funziona proprio per niente, nessuno riesce ad aiutarmi?