Pegar id do Children pela classe

[Tuk 0]

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.

[William Bruno 1501]

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

 

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

[Tuk 0]

$(".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 1501]

seria assim:

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

[Tuk 0]

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

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

[Tuk 0]

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

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

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

[Henrique Barcelos 290]

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

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