Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ArthurMVA

[Resolvido] Jquery agindo em todas classes ao mesmo tempo

Por , em Javascript

Recommended Posts

ArthurMVA    0

ArthurMVA
Postado

Olá pessoal, vou começar postando o código para depois explicar meu "pequeno" problema.

<script type="text/javascript">
$(function(){
$('.posts').mouseover(function(){
	$('.reblogdetails').stop().animate({height:'100%'},300);
});
$('.posts').mouseleave(function(){
	$('.reblogdetails').stop().animate({height:'0%'},300);
});
});
</script>

<style>
.reblogdetails{
background:rgba(0,0,0,0.4);
position:absolute;
height:0%;
width:410px;
margin-left:-5px;
margin-top:-5px;
overflow:hidden;
}
</style>

 

Bem, é o seguinte: Ao passar o mouse na div '.posts' apareceria a div '.reblogdetails' e cobriria toda a div '.posts'. Até ai funcionou apenas com css. O problema é que eu queria que ao passar o mouse em '.posts' a div '.reblogdetails' descesse com uma animação, tipo "linear", e então recorri ao Jquery. Funcionou. O único problema é que ao passar o mouse na div '.posts' a div '.reblogdetails' aparece em todos os posts e, no meu caso, ela teria que aparecer em um de cada vez, individualmente. Qual seria a solução para este problema?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado 

$('.reblogdetails').stop().animate({height:'100%'},300);

Assim você não discrimina quem deve executar o efeito, todos os elementos que tem a classe irão ser afetados. Você deve diferenciar de acordo com o elemento do evento, estabelecer uma relação entre eles que o torne único.

 

Posta a estrutura HTML desses elementos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ArthurMVA    0

ArthurMVA
Postado

É impossível distinguir todas as classes '.reblogdetails'. Isso porque é um site, e, sendo assim, são vários e vários e vários posts. Não tem como eu ir no blog e pegar todas as centenas de páginas e distinguir classe por classe desta coisa. Sem falar que, caso eu fizesse isso, eu teria que editar o design do blog a cada nova postagem, o que fica totalmente fora de cogitação. Eu sei que com o (this) no jquery ele age individualmente, mas, no meu caso, seria impossível colocar (this) no código (eu já tentei). Recorri aqui por ultima tentativa de que isso finalmente desse certo.

Segue o código abaixo, ele está completo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}</title>

<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#bottom');
$container.imagesLoaded( function(){
	$container.masonry({itemSelector : '.posts'});
});
$('body').css("display","none");
$(document).ready(function(){
	$('body').fadeIn(300);
});
$('.posts').mouseover(function(){
	$('.reblogdetails').stop().animate({height:'100%'},200);
});
$('.posts').mouseleave(function(){
	$('.reblogdetails').stop().animate({height:'0%'},200);
});
});
</script>

<style type="text/css">

@charset "utf-8";
/* CSS Document */

*{
padding:0;
margin:0;
}

::selection {color:#000; background:#FF6A6A;}

body{
background:#000;
}

a{
text-decoration:none;
}

#all{
margin:0 auto;
width:823px;
}

#top{
position:fixed;
z-index:9000000;
width:823px;
text-align:center;
background:rgba(0,0,0,0.8);
padding:0 0 3px 0;
border-bottom:1px solid #CCC;
}

.h1{
color:#fff;
font-family:"Times New Roman", Times, serif;
font-size:50px;
}

#bottom{
width:823px;
position:absolute;
z-index:8999999;
top:80px;
}

.posts{
background:#111;
color:#fff;
width:400px;
overflow:hidden;
float:left;
margin-left:1px;
margin-bottom:1px;
padding:5px;
}

.reblogdetails{
background:rgba(0,0,0,0.4);
position:absolute;
height:0%;
width:410px;
margin-left:-5px;
margin-top:-5px;
overflow:hidden;
}

#reblog{
height:100%;
top:50%;
position:relative;
left:50%;
}

#foto{
width:400px;
}
#foto img{
max-width:400px;
}

</style>

</head>

<body>

<div id="all">

<div id="top"><div class="h1">Titulo</div></div>

<div id="bottom">

<div class="posts"><div class="reblogdetails"><div id="reblog"><a href="#"><img src="img/reblog.png" /></a></div></div>
<div id="foto"><img src="http://25.media.tumblr.com/tumblr_m9288vAewC1qfjigwo1_400.jpg" /></div>
</div>

</div>

</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Distinguir no script, eu quis dizer.

 

$('.posts').mouseover(function(){
   $(this).find('.reblogdetails').stop().animate({height:'100%'},200);
});
$('.posts').mouseleave(function(){
   $(this).find('.reblogdetails').stop().animate({height:'0%'},200);
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito