Ir para conteúdo

POWERED BY:

Arquivado

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

BlackeR

Como aumentar tamanho de uma div num único sentido usando jQuery ?

Por , em Javascript

Recommended Posts

BlackeR    0

BlackeR
Postado

Olá pessoal, estou querendo fazer tipo um box que aumenta somente para cima. Com o .animate() se eu aumentar a height, ele aumenta para os dois sentidos. Como fazer para ele aumentar somente para um único sentido (para cima) ? Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

BlackeR    0

BlackeR
Postado

obrigado pela ajuda. Estou fazendo um exemplo aqui, veja o código:

 

<html>
<head>
<title>Menu Superior</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.box").hover(function(){
$(this).animate({height: "150px", top: "-50px", backgroundColor:'#ccc'}, 700);
});
});
</script>
<style>
.box {
height: 100px;
width: 100px;
border: 2px solid #ff0000;
float: left;
margin-left: 2px;
margin-top: 100px;
position: relative;
}
#home {
background: #eaff00;
}
#projetos {
background: #1f69f1;
}
#contato {
background: #4cf144;
}
</style>
</head>
<body>
<div id="menu">
<div class="box" id="home" >Home</div>
<div class="box" id="projetos" >Projetos</div>
<div class="box" id="contato" >Contato</div>
</div>
</body>
</html>

 

Bem, queria que assim que tirar o mouse da div, ela voltasse para o seu estado inicial. Tem algum jeito de fazer isso mais simplificado ou terei que criar um código para cada div, já que o estado inicial deles são diferentes. Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Patrique    0

Patrique
Postado

Faz assim

 

<script type="text/javascript">
$(document).ready(function(){
  $("div.box").hover(function(){
     $(this).animate({height: "150px", top: "-50px", backgroundColor:'#ccc'}, 700);
  }, function(){
     $(this).animate({height: "150px", top: 0, backgroundColor:'#ccc'}, 700);
  });
});
</script>

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

BlackeR    0

BlackeR
Postado

obrigado pela ajuda Patrique, mas também queria que ele voltasse ao seu background original e nesse caso o seu código não seria suficiente para isso. Alguma solução ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Patrique    0

Patrique
Postado

Basta mudar o valor ué, tipo...

 

<script type="text/javascript">
$(document).ready(function(){
  $("div.box").hover(function(){
     $(this).animate({height: "150px", top: "-50px", backgroundColor:'#ccc'}, 700);
  }, function(){
     $(this).animate({height: "150px", top: 0, backgroundColor:'red'}, 700);
  });
});
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

BlackeR    0

BlackeR
Postado

então eu teria que fazer um código para cada uma das três divs. Queria saber se tem alguma forma de simplificar, tipo cancelar todas as mudanças do hover.

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