jQuery hover: dissolvenza in un div nascosto, mentre la dissolvenza in chiusura quella “default”

Question

Ho due div (uno dei quali nascosti con i CSS), che sto dissolvenza dentro e fuori in alternanza all'interno di uno spazio comune, al passaggio del mouse.

Questo è il markup:

<div id="wrap">

    <div class="image">
        <img src="http://domain.com/images/image.png">
    </div>

    <div class="text hide">
        <p>Text text text</p>
    </div>

</div>

E io ero l'applicazione di questo codice jQuery per sfumare l'immagine - e poi si spegne nel testo, al passaggio del mouse:

<script type="text/javascript">
$(function(){
$('#wrap').hover(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        },
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

Ma il problema è che il div testo diventa appiccicoso e non svanirà - sempre che il movimento del mouse è troppo veloce

.

Sapete dove può essere la soluzione a questo?

ho creato un test online: http://paragraphe.org/stickytext/test.html

Grazie per qualsiasi suggerimento

Answer 1

Se il tuo involucro non dispone di una larghezza e l'altezza su di esso è possibile ottenere alcuni risultati strani, come si restringe una volta che l'elemento di immagine viene rimossa. Per visualizzare, aggiungere un bordo e altezza / larghezza fissa intorno l'involucro. O almeno utilizzare la stessa altezza per i div di immagine e di testo.

<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>

A CURA

Rimosso un esempio di codice che non era applicabile a ciò che si sta cercando di realizzare.

Answer 2

provare a utilizzare .Stop () sulla funzione hover-out, che impedirà la gara-condizione in cui si sposta rapidamente il mouse sulle div

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').stop().fadeOut(100, function(){
               $('#wrap.image').stop().fadeIn(100);                                            
            });
    }
    );
});
</script>

Answer 3

Prova a usare la coda:

<script type="text/javascript">
$(function(){
    $('#wrap').hover(
        function(){
            $('#wrap .image').stop(true).fadeOut(100);
            $('#wrap .image').queue(function(){
                $('#wrap.text').fadeIn(100);
                $(this).dequeue();
            });
        },
        function(){
            $('#wrap .image').stop(true).queue(function(){
                $('#wrap.text').fadeOut(100);
                $(this).dequeue();
            });
            $('#wrap .image').fadeIn(100);
        }
    );
});
</script>

La coda di jQuery è per elemento, quindi quello che sto cercando di fare qui è quello di lanciare gli effetti di testo sotto code de immagine.

E mi permetta di darle un altro suggerimento. Se la vostra intenzione è quella di applicare questo effetto a varie immagini utilizzare classe invece di id.

...
    $('.wrap').hover(
        function(){
            var wrap = this;
            $('.image', wrap).stop(true).fadeOut(100);
            $('.image', wrap).queue(function(){
                $('.text', wrap).fadeIn(100);
                $(this).dequeue();
            });
....

In questo modo è sufficiente chiamare questa volta.

Answer 4

Il tuo codice non svanisce il div testo. Entrambe le funzioni della manifestazione hover svanirà l'immagine e dissolvenza nel testo.

Answer 5

Hai lo stesso codice in entrambe le funzioni hover. Non dovrebbe sostituire i selettori nel secondo caso?

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').fadeOut(100, function(){
               $('#wrap.image').fadeIn(100);                                            
            });
    }
    );
});
</script>

Answer 6

grazie per tutti i consigli:

Ho cercato di utilizzare gli eventi / MouseLeave MouseEnter, dal momento che sembrano guardare in dettaglio per i div di cui si occupano ( come si vede qui ), ma nulla è cambiato. Quindi, visto che tutte le solite istruzioni jQuery non rispondevano ho verificato come suggerito il mio CSS.

E c'era il trucco.

Quello che avevo:

.text p{position:relative; top:-370px; padding: 0 10px}

è stata la creazione di un enorme spazio vuoto che il browser è stato interpretando come "non a sinistra ancora" dal cursore (ho notato che sorvolo quello spazio vuoto stava facendo il testo di rispondere correttamente).

Così ho cambiato a che:

.text {margin-top:-370px; padding: 0 10px; float:left}

che lascia il tag "p" da solo, e posiziona il secondo blocco nella div, ma senza traccia di spazio vuoto dietro di esso.

Quindi, per quanto riguarda il frammento, funzionerà anche con mouseenter / moseleave e hover :

<script type="text/javascript">
$(function(){
$('#wrap').mouseenter(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        }
        );
$('#wrap').mouseleave(
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

Questa è la versione migliorata http://paragraphe.org/nice/test.html