Ir para conteúdo

POWERED BY:

Arquivado

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

brunoboassi

[Resolvido] Problema com slideUp() slideDown()

Por , em Javascript

Recommended Posts

brunoboassi    0

brunoboassi
Postado

Boa noite

Sou meio novato aqui no forum e não sei se ja existi um topico parecido, mas como acredito ser um caso particular, acredito que não.

Estou desenvolvendo um site e estou usando html, php, javascript, toda a trupe.

Tenho uma pagina que está com um problema, quando eu coloco o mouse sobre um lugar ele deveria mostrar uma textarea e deslizar um banner pra cima, coisa que esta acontecendo, só que as vezes ele entra num loop praticamente infinito , como se eu tivesse passado o mouse por cima varias vezes e as vezes ele simplesmente faz certo.

O link esta abaixo e o codigo vou colocar tambem( ele fica dentro de outra pagina, por isso pod ser que aparenta faltar algumas coisas).

Se alguem puder me ajudar a resolver o problema, agradeço

Att.

 

Link do site

<body>
<style>
@font-face {
font-family: star_cine;
src: url(fonts/star_cine.ttf);

}
table
{

}
.tab1
{
}
input{
background-color:transparent;
}
.apresentacao
{
border:0px solid;
z-index:2;
font-family: star_cine;
font-size: 18px;
color:#FFFFFF;

}
.apresentacao1
{
border:0px solid;
z-index:2;
font-size: 12px;
color:#FFFFFF;
}
.tabelagaleria
{

background-color:transparent;
background-position:center center;
border-color:#006600 ;
border-width: 2px;
border-style:solid;
width:266px;
height:300px;
max-height:300px;
max-width:266px;
}
.tabelagaleria2:hover
{
background-color:rgba(0,0,0,0.8);
}

</style>
<script src="jquery/jquery.js"></script>
<table>
<tr><td>
<?php while ( $linha = mysql_fetch_array($sql))
{
$id = $linha["id"];
$nome = htmlentities($linha["nome"]);
$apelido = htmlentities($linha["apelido"]);
$email = htmlentities($linha["email"]);
$area = htmlentities($linha["area"]);
$cargo = htmlentities($linha["cargo"]);
$foto = htmlentities($linha["foto"]);
$nomeid = "nome".$id;
$apelidoid = "apelido".$id;
$bannerid = "banner".$id;
$banner1id = "banner1".$id;
$formid = "form".$id
?>

<form name="form12" onMouseOver="sobe(<?php echo $id ?>)" onMouseOut="desce(<?php echo $id ?>)" id="<?php echo $formid ;?>" class="tabelagaleria" style="z-index:3;background-image:url(<?php  echo $foto ;?>);">
<table id="<?php echo $id ?>" class="tab1"  width="266" height="300" cellspacing="0" cellpadding="0"  >
 <tr>
   <td width="266"><input type="text"  name="banne" style="background-image: url(imagens/png/banner1.png); background-attachment: local; background-repeat: no-repeat; background-position: center center; height: 68px; width: 266px; background-color: transparent; border: 0px solid; position: relative; left: -4px; top: 120px; z-index: 1;" height="68px" width="266px" id="<?php echo $bannerid ;?>" readonly/>      <textarea name="banner2"   id="<?php echo $banner1id ;?>" style="position: relative; left: 0px; top: -70px; width: 266px; height: 300px; display:none; font-size:16px; font-style:normal; z-index:0; max-height:300px;max-width:266px;" readonly="readonly" >


Nome: <?php echo $nome ;?>
Apelido: <?php echo $apelido ;?>
Email: <?php echo $email ;?>
Area: <?php echo $area ;?>
Cargo: <?php echo $cargo ;?>
</textarea>
     <input type="text" value="<?php echo $apelido ;?>" class="apresentacao" style="position: relative; left: 5px; top: 70px; width: 186px; height: auto ;" name="apelido" id="<?php echo $apelidoid ;?>" readonly>
     <input align="center" type="text"  value="<?php echo $nome ;?>" class="apresentacao1" style="position: relative; left: 40px; top: 70px; width: 149px; height: 19px;" name="nome" id= "<?php echo $nomeid ;?>"  readonly></td>
 </tr>
 </table>
</form>
</td>
<?php if(($id)%3 == 0)
{
echo "</tr><tr>";
}?>
<td>
<?php } ?>
</td>

<script language="javascript">
function sobe(B)
{
var i = b
var seletor = "#"+String(i);
var seletorban = "#banner"+String(i);
var seletorap = "#apelido"+String(i);
var seletornom = "#nome"+String(i);
var seletorban1 = "#banner1"+String(i);
var seletorform = "#form"+String(i);
$(seletorban).animate({top:0}, 500)
$(seletorap).animate({top:-358}, 500)
$(seletornom).animate({top:-352}, 500)
$(seletorban1).css("background","rgba(0,0,0,0.8)").css("border","0px solid").css("color","#FFFFFF").css("font","16px arial bold").css("height","300px").css("width","266px").slideDown(500)

}
function desce(a)
{
var i = a;
var seletor = "#"+String(i);
var seletorban = "#banner"+String(i);
var seletorap = "#apelido"+String(i);
var seletornom = "#nome"+String(i);
var seletorban1 = "#banner1"+String(i);
var seletorform = "#form"+String(i);
$(seletorban).animate({top:120}, 500)
$(seletorap).animate({top:70}, 500)
$(seletornom).animate({top:70}, 500)
$(seletorban1).slideUp(500)
}
</script>


</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

já que você tá usando jQuery, não use eventos no meio do html:

 

onMouseOver="sobe(<?php echo $id ?>)" onMouseOut="desce(<?php echo $id ?>)"

 

faça o bind dos eventos no carregamento do DOM, assim como mandam as boas práticas do javascript.

E ai, no lugar do mouseOver, use mouseEnter, e no lugar do mouseOut use mouseLeave(eventos exclusivos do jQuery, por isso você precisa mudar a forma como faz o bind)

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunoboassi    0

brunoboassi
Postado

Então cara, eu até tinha feito desse jeito, só como os meus elementos eram gerados automaticamente no laço do banco de dados, eu não soube como fazer pra pegar a id de cada um e tals, por isso usei esse metodo.

Como eu poderia fazer pra gerar uma função pra cada?

Eu ja tentei usando uma variavel de controle, mas o efeito ficava só no ultimo. Ja tentei usando for, mas dava pau, ja tentei um outro jeito,que agora não me lembro, no qual ficava em todos ao mesmo tempo.

Se puder me ajudar fico agradecido.

 

Outra pergunta. MouseEnter e MouseLeave são exclusivos de jquery? sem chance de usar como event do elemento?

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

sim, mouseenter e leave são exclusivos do jQuery.

 

para fazer um para cada, você precisa entender o objeto this

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

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