jQuery pairar: desaparecendo em uma div oculta enquanto desaparecendo a um “default”

Question

Eu tenho duas divs (um deles escondida com CSS), que eu estou entrando e saindo em alternância dentro de um espaço comum, em foco.

Esta é a marcação:

<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 eu estava aplicando esse código jQuery para fazer desaparecer a imagem - e desaparecendo no texto, em foco:

<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>

Mas o problema é que a div de texto fica pegajosa e não vai desaparecer -. Sempre que o movimento do mouse é muito rápida

Você sabe onde ele pode ser a solução para isso?

Eu configurar um teste on-line: http://paragraphe.org/stickytext/test.html

Obrigado por qualquer dica

Answer 1

Se o seu invólucro não tem uma largura e altura em que você pode obter alguns resultados estranhos como ele encolhe uma vez que o elemento de imagem é removido. Para ver, adicionar uma borda e altura / largura fixa em todo o wrapper. Ou, pelo menos, usar a mesma altura para a imagem eo texto divs.

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

EDITADO

Removido um exemplo de código que não era aplicável ao que você está tentando realizar.

Answer 2

tente usar .Stop () na sua função de pairar-out, o que impedirá a corrida condição onde você se move rapidamente o mouse sobre as divs

<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

Tente usar a fila:

<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>

A fila jQuery é por elemento, então o que eu estou tentando fazer aqui é lançar os efeitos de texto sob fila de imagem.

E deixe-me dar-lhe uma outra sugestão. Se sua intenção é aplicar este efeito a vários classe imagens uso em vez de id.

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

Desta forma, você só precisa chamar isso de uma vez.

Answer 4

O seu código nunca desaparece da div texto. Ambas as funções do evento em foco vai desaparecer a imagem e desaparecer no texto.

Answer 5

Você tem o mesmo código em ambas as funções hover. você não deve substituir os seletores no segundo 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

obrigado por todas as dicas:

Eu tentei usar o mouseenter / eventos MouseLeave, uma vez que eles parecem olhar em detalhe para os divs que estão a tratar ( como visto aqui ), mas nada mudou. Então, vendo que todas as instruções habituais jQuery não estavam respondendo Eu verifiquei como sugerido meu CSS.

E lá estava o truque.

O que eu tinha:

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

foi a criação de um espaço enorme, vazia que o navegador estava interpretando como "não à esquerda ainda" pelo cursor (notei que sobrevoar o espaço vazio estava fazendo o texto para responder adequadamente).

Então eu mudei para que:

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

que permite a tag "p" sozinho, e as posições do segundo bloco acima no div, mas sem um traço de espaço vazio por trás dele.

Em seguida, sobre o trecho, que vai funcionar bem com mouseenter / moseleave e pairar :

<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>

Esta é a versão melhorada http://paragraphe.org/nice/test.html