Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Div escondida usando jQuery

26-07-2009 14:29

Esse script mostra uma figura que ao passar o cursor sobre ela, ela rola para cima mostrando o conteúdo, tirando o cursor, a figura volta a posição original

HEAD

<style type="text/css"> .sliding{ width: 250px; height: 250px; margin:10px; float:left; background:#161616; color: #CCCCCC; border: solid 0px #FFFFFF; overflow: hidden; position: relative; } .sliding img{ position: absolute; top: 0; left: 0; border: 0; } .sliding p{ padding: 0 10px; color:#afafaf; font-weight:bold; font:10pt "Lucida Grande", Arial, sans-serif; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.sliding.down').hover(function(){ $(".cover", this).stop().animate({top:'-300px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300}); }); }); </script>

BODY

<div class="sliding down"> <img class="cover" src="publicidade.jpg" width="250" height="250"/> seu conteúdo vem aqui </div>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado