[Resolvido] Jquery FadeIn FadeOut Com mouse inativo e .hover

[insiderman 0]

Oi Pessoal,

 

Eu tenho um script que peguei na net que faz mais ou menos o que eu quero To tentando editar ele fazem 2 dias mas como não sou programador fica dificil :( Quem puder dar essa ajuda agradeceria imensamente.

 

Bem tenho... um elemento na página denominado #top Qundo a pagina carrega esse elemento da um fadeOut em 3 segundos e volta a aparecer com a atividade do mouse. Se o mouse ficar inativo ele volta ao fadeOut. Até aqui tudo bem.

 

O que quero que ele faça é qndo colocar o mouse em cima dele de um Fadein e trave lá, mesmo que o mouse ficar inativo em cima dele ele continue aparecendo.????

 

Outra pergunta: Como eu faço pra atribuir esse código a varios outros elementos "#" Por exempo o elemento #top, #arrowLeft, e #arrowRigth tbm contarem com as funções que o código provê

 

 

 

Segue o script:

 

 

   $(document).ready(function() {
   var $top = $('#top');
   var $document = $(document);
   var timer = null;
   var timerIsRunning = false;

   $top.mousemove(function(e){
       e.stopPropagation();
   });

$top.hover(function(e){
    e.stopPropagation();
   });

   setTimeout(function() {
                       $document.mousemove(function(e) {
                               if($top.is(':hidden')) {
                                   $top.fadeIn();
                               } else {
                                   if(!timerIsRunning) {
                                       timerIsRunning = true;
                                       clearTimeout(timer);
                                       timer = setTimeout(function() { $top.fadeOut();  }, 3000);
                                       setTimeout(function() {timerIsRunning = false;}, 2000);
                                   }
                               }
                       });
               }, 500);

});

 

 

Muito obrigado pela atenção e sucesso.

[William Bruno 1501]

O que quero que ele faça é qndo colocar o mouse em cima dele de um Fadein e trave lá

ai você precisa do evento mouseover

 

 

 

Outra pergunta: Como eu faço pra atribuir esse código a varios outros elementos "#"

ai tem q dar uma boa refatorada nesse código.

 

encapsule numa function a rotina que você precisa para os demais elementos, e chame qntas vezes você quiser, enviando como parametro os teus objetos

[insiderman 0]

Ahhh Muito obrigado pelas explicações! Com o perdão da ironia, para um leigo como eu ficou claríssimo rsrs. A única coisa que me esclareceu foi que eu tenho que usar mouseover em vez de .hover :/

 

Pode me indicar um caminho mais didático pelo menos nessa de usar o mouseover ??? Fui na página do jquery e tentei fazer as modificações tomando por base a demo deles mas o script trava com o #top visivel em todas as minhas tentativas.

 

Grato pela atenção.

[insiderman 0]

Bem a minha "outra pergunta" acabei descobrindo por mim mesmo. já que no fórum é cheio de gênios dispostos a ajudar só me vieram com respostas inúteis para especialistas com soluções mirabolantes de rafatorada em código e encapsulamento de funções a resposta vem da pessoa menos improvável o próprio absolutamente leigo que postou a dúvida.

 

Voltando a vaca fria:

 

Para atribuir as funções do script a vários elementos "#" Por exemplo o elemento #top, #arrowLeft, e #arrowRigth basta fazer isso onde for necessário:

 

$('#top,#arrowLeft,#arrowRigth');

 

Bem, sem refatoramento nem encapsulamento de nada q seja ;)

 

vamos ver se alguém ajuda com o tal do mouseover para excluir o efeito FadeOut decorrente da inatividade do mouse qndo este estiver sobre.

[William Bruno 1501]

já que no fórum é cheio de gênios dispostos a ajudar só me vieram com respostas inúteis para especialistas com soluções mirabolantes de rafatorada em código e encapsulamento de funções a resposta vem da pessoa menos improvável o próprio absolutamente leigo que postou a dúvida.

muito bacana dizer isso para uma pessoa que dispos do tempo dela, para tentar te ajudar. E você, ao menos tentou ajudou alguém ?

Ou a sua soberba e egoísmo te impedem de repassar conhecimento ? Ninguém é dono da verdade, e ninguém sabe tudo.

 

Não tenho como adivinhar o seu nível de conhecimento, portanto, era impossível que eu fosse 'didático', sem saber que assim o precisava ser.

O fórum é lugar para movimentarmos idéias, discutirmos, e aprendermos. E não para resolver problemas dos outros simplesmente.

 

A comunidade só se mantém, pq existem pessoas que respondem umas as outras.

Acho que a maioria das pessoas esquecem, que quem está aqui respondendo, não ganha nada para isso. É voluntário.

 

 

-> Qndo o mouse estiver em cima do elemento (#top no teu caso), você atribui uma class a esse elemento: .active

Essa class vai lhe dizer em qual elemento o mouse está.

-> Qndo o mouse sair de cima do elemento, você remove essa class [ .removeClass('active') ]

-> Só esconda os elementos que não tiverem a class .active [ .not('.active') ]

Dessa forma, o elemento em que o mouse estiver sobre, ficará a mostra, mesmo com a inatividade do mouse.

 

No lugar do hover ou mouseover/mouseout, use os pares: mouseenter e mouseleave

pois o hover, e o mouseover, possui 'um defeito': são disparados mais vezes do que deveriam. Apenas mecher o mouse dentro do elemento, mesmo sem sair de cima dele, dispara o evento. Por isso, a dupla: mouseenter e mouseleave é mais indicada.

[insiderman 0]

já que no fórum é cheio de gênios dispostos a ajudar só me vieram com respostas inúteis para especialistas com soluções mirabolantes de rafatorada em código e encapsulamento de funções a resposta vem da pessoa menos improvável o próprio absolutamente leigo que postou a dúvida.

muito bacana dizer isso para uma pessoa que dispos do tempo dela, para tentar te ajudar. E você, ao menos tentou ajudou alguém ?

Ou a sua soberba e egoísmo te impedem de repassar conhecimento ? Ninguém é dono da verdade, e ninguém sabe tudo.

 

Po cara Desculpe se te ofendeu a intenção era apenas ser engraçado Quiz dizes que as vezes, dado nosso nível de conhecimento, a solução pode ser mto mais simples do que imaginamos.

 

Já ajudei sim várias pessoas de minha área que não é informática a resolverem seus problemas e nunca me indispus nem uma vez sequer de fazer isso Tenho mto orgulho por isso e quisera eu que houvessem mais pessoas como você e como eu que oferecem seus conhecimentos de forma edificante e sem esperar nada em troca. Claro que eu reconheço sim a disposição de todos nos forums a ajudar e se não fosse isso eu mesmo teria deixado de fazer mtas coisas as quais eu fiz.

 

De toda forma desculpe mais uma vez se me expressei mau e obrigado pelas dicas. Como sou leigo como disse vou na base da pesquisa e da tentativa e erro tentar implementar essas dicas que você me deu. se eu tiver precisar de ajuda não se preocupe que vou voltar a importunar. rsrs

 

O que eu to tentando fazer é o seguinte: Eu tenho uma aventura marcada e estou fazendo um album de fotos baseado em atualizações no picasa para usar durante a viagem. Como essas imagens as vezes tem legendas mto grandes a melhor forma é esconde-los durante a visualização do slideshow. A apresentação das fotos original do picasa é um lixo por isso estou fazendo um slideshow personalizado. Vou atualizar um blog com as informações durante essa viagem. Se quiser dar uma olhada como ta ficando essa galeria o teste está aqui: Clique aqui

 

Vlw

[William Bruno 1501]

Po cara Desculpe se te ofendeu a intenção era apenas ser engraçado

Okay, tranquilo.

 

é complicado sermos engraçados num ambiente em que não temos "tom de voz", "entonação", e nem "olhares".

Por isso que, dadas experiências anteriores, eu me senti profundamente provocado com o comentário. Realmente existem pessoas que pensam oque você disse, e não estão nem ai para nada.

 

 

Dá uma olhada aqui:

http://wbruno.com.br/blog/2011/09/03/simulando-um-mousestop-jquery-javascript/

 

fiz com base no que você descreveu.

[insiderman 0]

Funcionou perfeitamente ! Exatamente o efeito que eu estava tentando fazer.

 

Mto obrigado por compartilhar a solução. Graças a pessoas como você conteúdos importantes podem ser publicado com bom design.

 

Um forte abraço e até a próxima