Dúvida com animação em JQuery. Quem manja??

Enviada por Dam 
Fóruns Lista de mensagens Novo tópico
Dam
Dúvida com animação em JQuery. Quem manja??
06 de November de 2009 às 11:54AM
Pessoal,

Como faço, utilizando JQUEY, para que o usuário ao acessar a página um div seja mostrado de forma animada, e após algum tempo (dois minutos), esse div volte a repetir a animação atribuida a ele.


Agradeço a resposta.
Responder Citar
Guilherme Ribas
Re: Dúvida com animação em JQuery. Quem manja??
18 de December de 2009 às 02:06PM
Olá amigo.

Pode-se fazer isso de forma muito fácil com jQuery.
Fiz aqui um exemplo de como mostrar um pop-up, e como escondê-lo com timer de 3segundos para mostrar o mesmo novamente. É somente copiar o código e salvar como HTML para testar.

Espero que ajude.

Abraço,

Guilherme Ribas

=======================================================

<html>
<head>
<title>Exemplo jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script language="Javascript">

function Centralizar(obj_id) {
var item= $("#" + obj_id);
var win = $(window);
item.css({
position: "absolute",
top: (win.height() / 2) - (item.height() / 2),
left: (win.width() / 2) - (item.width() / 2)
});
};

function Esconder(obj_id) {
$("#"+obj_id).fadeOut(1000); /* Esconde div */
$("#"+obj_id).animate({opacity: 1.0}, 3000).fadeIn(1000); /* Após 3000 ms, mostra div */
};

function Mostrar(obj_id) {
Centralizar(obj_id);
$("#"+obj_id).fadeIn(1000);
};

</script>
</head>
<body>
<div id="mensagem" style="display: none;">
<div style="position: relative; text-align: center; padding-top: 15px; width: 300px; height: 275px; border: 1px solid #CCC; background: #000; color: #FFF;">
<div style="position: absolute; padding: 2px; background: #FFF; color: #FF0000; right: 5px; top:5px; border: 1px solid #CCC; cursor: pointer; font-size: 10px;" onclick="Esconder('mensagem');">FECHAR</div>
<br/>
Exemplo de janela com animação em flash.
<br/><br/>
<object id="webserver1" height="160" width="240" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="http://www.flashkit.com/movies/3D/Gears-Thierry_-12032/Gears-Thierry_-12032.swf" name="movie"/>
<param value="high" name="quality"/>
<param value="#000000" name="bgcolor"/>
<embed height="160" width="240" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#000000" quality="high" src="http://www.flashkit.com/movies/3D/Gears-Thierry_-12032/Gears-Thierry_-12032.swf"/>
</object>
</div>
</div>
<h1>Exemplo jQuery</h1>
<h2>Pop ups em jQuery</h2>
<button onclick="Mostrar('mensagem');">Clique para mostrar</div>
</body>
</html>
Responder Citar
Tópico mais recente Tópico mais antigo
Você precisa estar logado no PHPBrasil.com para poder enviar mensagens para os nossos fóruns.

Faça o login aqui.