Publicado em 26 de jan.

Pegar id do Children pela classe

Olá,

Desejo fazer o efeito slide com o id da div filha e não com a classe como está acontecendo.

$(".anteriores").hover(

 function () {
 $ ( this ).children('.filha').show("slide", { direction: "left" }, 300);
 },
 function () {
 $ ( this ).children('.filha').hide("slide", { direction: "left" }, 300);
 }
);

Como as divs ficam uma do lado da outra, está bugando quando passa o mouse muito rápido por cima de todas. Pois o efeito da seguinte começa antes do anterior acabar. Acredito que fazendo o efeito pelo id que é diferente em todas isso não aconteça, mas como pegar o id ?

EDIT:

Fiz uns testes aqui, e acho que está acontecendo é que quando tira o mouse da div antes do efeito 'aparecer' terminar, a div não desaparece.

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 26 de jan.

se você fizer por ID, vai ter o mesmo problema.

use um .stop() antes de começar uma nova animação.

Tuk· 26 de jan.

$(".anteriores").hover(

 function () {
 $ ( this ).children('.ofertaan-link').stop();
 $ ( this ).children('.ofertaan-link').show("slide", { direction: "left" }, 100);

 },
 function () {
 $ ( this ).children('.ofertaan-link').hide("slide", { direction: "left" }, 100);
 }
);

Não funcionou, acredito que porque eu não estou dando .stop() na animação anterior, e sim na que nem começou. Não entendi como por o .stop() no meio da animação.

Teria como por uma condição ou algo do tipo?

William Bruno· 27 de jan.

seria assim:

$('.ofertaan-link').stop();

Tuk· 27 de jan.

>
seria assim:

$('.ofertaan-link').stop();

Sim, mais a questão está na ordem dos 'eventos', em que linha vou dar o stop() . Ainda nao encontrei o ponto

$(".anteriores").hover(

 function () {
 $('.ofertaan-link').stop();
 $ ( this ).children('.ofertaan-link').show("slide", { direction: "left" }, 100);

 },
 function () {

 $ ( this ).children('.ofertaan-link').hide("slide", { direction: "left" }, 100);

 }
);

Henrique Barcelos· 28 de jan.

Posta a estrutura do HTML para podermos entender melhor...

Tuk· 28 de jan.

<section name="Ofertas Anteriores" id="ofertasanteriores">
 <div name="Segunda" class="oferta anteriores">
 <img src="img/steve.jpg" />

 <a href="#" class="ofertaan-link"><h3>Tio Steve</h3></a>
 </div>

 <div name="Segunda" class="oferta anteriores">
 <img src="img/oferta.jpg" />
 <a href="#" class="ofertaan-link"><h3>Tio Steve</h3></a>
 </div>

 <div name="Segunda" class="oferta anteriores">
 <img src="img/oferta.jpg" />
 <a href="#" class="ofertaan-link"><h3>Tio Steve</h3></a>
 </div>

 <div name="Segunda" class="oferta anteriores">
 <img src="img/oferta.jpg" />
 <a href="#" class="ofertaan-link"><h3>Tio Steve</h3></a>
 </div>

 <div name="Segunda" class="oferta anteriores">
 <img src="img/oferta.jpg" />
 <a href="#" class="ofertaan-link"><h3>Tio Steve</h3></a>
 </div>

 <div name="Segunda" class="oferta anteriores">
 <img src="img/oferta.jpg" />
 <a href="#" class="ofertaan-link-esquerda"><h3>Tio Steve</h3></a>
 </div>

 </section>

Henrique Barcelos· 29 de jan.

Faz assim:

$(".anteriores").hover(

 function () {
 $('.ofertaan-link').stop(); // todos os elementos .ofertaan-link
 $ ( this ).children('.ofertaan-link').show("slide", { direction: "left" }, 100);

 },
 function () {
 $ ( this ).children('.ofertaan-link').hide("slide", { direction: "left" }, 100);
 }
);

Tuk· 29 de jan.

Isso é igual o ultimo código que postei, foi assim que fiz.

Henrique Barcelos· 29 de jan.

Verdade, :pinch: falha minha...

Você tem um link ou está em desenvolvimento local?

Não estou conseguindo visualizar exatamente o efeito que você deseja...

Tuk· 2 de fev.

Está local, mas tem esse exemplo aqui.

http://www.shockblast.net/

Tenho 6 imagens, que em hover(), exibem um link de sua 'descrição', com o efeito slideLeft . Meu problema é que quando passo o mouse rapido sobre as imagens, ela nao termina o evento de uma e pra começar outra e fica bugado.

ainda nao consegui o efeito ;\