[Resolvido] Problema Slider

[Matheus Conti 0]

Eae Galera to comecando em JQuery pesso ajuda de voces

fiz um slider com DIV + JQUERY porem se eu repitir o eefeito ele faz nos 2 exemplo

 

Aqui o efeito

 

Quando eu copio as div etc... acontece isso

 

 

 

Se voce nao entendeu e o seguinte o efeito faz 2 vezes na div original e na div que eu copiei

 

aqui o codigo

 

<script language="javascript">
$(function(){

       $('.texto').css('display','none');
	$('.titulo').css('margin-top','-24px');


		$('.destaque').hover(function(e) {

			$('.titulo').css('display','block');
			$('.titulo').animate({"opacity": "100",
								"margin-top": "-90px"}, 250);

               $('.texto').css('display','block');
			$('.texto').animate({"opacity": "100",
								"margin-top": "-80px"}, "fast");
           }, function(){
			$('.texto').animate({"margin-top": "-80px",
								 "opacity": ".0"}, "fast");
			$('.titulo').animate({"margin-top": "-25px"}, "fast");

		});
});


</script>

[William Bruno 1501]

Entenda sobre o objeto THIS:

 

http://wbruno.com.br/2011/06/21/afinal-e-javascript/

[Matheus Conti 0]

Olá Willian mas uma vez voce me ajudando e por isso que voce esta onde esta :)

porem eu ja sabia do this ja tinha lido sobre ele e inclusive testado nesse exemplo ai

porem nao tive sucesso quando uso

 

<script language="javascript">

$(function(){
	var $this = $( this );  
       $('.texto').css('display','none');
	$('.titulo').css('margin-top','-24px');


		$this.hover(function(e) {

			$('.titulo').css('display','block');
			$('.titulo').animate({"opacity": "100",
								"margin-top": "-90px"}, 250);

               $('.texto').css('display','block');
			$('.texto').animate({"opacity": "100",
								"margin-top": "-80px"}, "fast");
           }, function(){
			$('.texto').animate({"margin-top": "-80px",
								 "opacity": ".0"}, "fast");
			$('.titulo').animate({"margin-top": "-25px"}, "fast");

		});
});


</script>

 

 

O hover nao funciona e quando mudo pra .click funciona porem continua repetindo nas div copiadas

[William Bruno 1501]

não não.. é pra você usar o this dentro do .hover()

 

Me mostre como é o teu html.

[Matheus Conti 0]

CSS

<style type="text/css">
*{
padding:0;
margin:0;
}
body{
background:#000;
}
.destaque{
width:297px;
margin-left:auto;
margin-right:auto;
height:155px;
border:1px solid #F4F4F4;
}


.destaque .titulo {  background: rgba(0, 0, 0, 0.9); color:#FFF; font-family: Lato,Helvetica,Arial,sans-serif; font-size:11px; position:absolute; padding:5px 10px 5px 10px;  margin-left:20px; z-index:9999; }

.destaque .texto{ padding:25px; width:247px; max-height:30px; color:#FFF; background: rgba(0, 0, 0, 0.7); margin-top:-80px;  font-family: Lato,Helvetica,Arial,sans-serif; font-size:14px; position:absolute;}

</style>

 

 

HTML

<div class="destaque">
	<img src="img_teste.PNG"  />
			<div class="titulo">DEPOIS DE “MÁSCARAS”</div>
<div class="texto">

	<strong>Lauro César Muniz vai escrever minissérie para a Record</strong>

      </div>

</div>

[William Bruno 1501]

Então creio que o script deva ficar assim:

 

 

<script type="text/javascript">
$(function(){

   $('.texto').css('display','none');
   $('.titulo').css('margin-top','-24px');


   $('.destaque').hover(function(e){
           var $this = $(this),
           $titulo = $this.find('.titulo'),
           $texto = $this.find('.texto');

           $titulo
               .css('display','block')
               .animate({"opacity": "100", "margin-top": "-90px"}, 250);

           $texto
               .css('display','block')
               .animate({"opacity": "100","margin-top": "-80px"}, "fast");
       },function(){
           var $this = $(this),
           $titulo = $this.find('.titulo'),
           $texto = $this.find('.texto');

           $texto.animate({"margin-top": "-80px","opacity": ".0"}, "fast");
           $titulo.animate({"margin-top": "-25px"}, "fast");
       }
   );
});
</script>

entendeu agora como usa o THIS ?

[Matheus Conti 0]

o find e pra pegar a atributo? o this entendi agora o find so tem essa funcao ?

[William Bruno 1501]

o .find() procura um elemento filho do outro.

 

Eu achei aquela classe que é filha do this. Naveguei pelo DOM.

http://api.jquery.com/find/

[Matheus Conti 0]

Vlw William como sempre ajudando mt obrigado