Ir para conteúdo

POWERED BY:

Arquivado

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

K@reca

jQuery

Por , em Javascript

Recommended Posts

K@reca    0

K@reca
Postado

Olá, estou a tentar fazer uma coisa em jQuery mas não está a ficar como eu quero, se poderem dar uma vista de olhos e darem uma ajuda agradeço.

 

Estou a tentar fazer uma coisa "igual" ao que está no rodapé do site notepad++, quando passamos o rato por cima de "Website kindly donated by".

http://notepad-plus-plus.org/

 

Neste momento o que consigui fazer foi isto:

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script> 
$(document).ready(function(){
  $("#creditos").mouseenter(function(){
    $("#panel").show().stop().animate({width:'200px'},1000);
    $("#panel1").show().stop().animate({height:'60px'},1000);

  });
});

$(document).ready(function(){
  $("#creditos").mouseleave(function(){
    $("#panel").animate({width: "0px"},1000);
    $("#panel1").animate({height:'0px'},1000);
  });
});
</script>

<style type="text/css"> 
#creditos {
	margin: 300px auto;
	width: 250px;
	height: 25px;
	background-color: red;
}

#aux {
	position: relative;
	margin: auto;
	text-align: center;
	width: 200px;
	height: 25px;
}

#panel
{
	margin: auto;
	text-align: center;
	opacity: 0.6;
	width: 0px;
	height: 25px;
	background:#999;
}

#panel1
{
	margin: auto;
	text-align: center;
	opacity: 0.6;
	width: 200px;
	height: 0px;
	background:#999;
}
</style>

</head>

<body> 
<div id="creditos">
	Passar por cima!
</div>
<div id="aux">
	<div id="aux1" style="height: 0px; margin: auto;"> <p style="padding: 3px;">Texto</p> </div>
	<div id="panel"> </div>
	<div id="panel1"> </div>
</div>
</body>

</html>

 

Nota: Nunca fiz nada em jQuery, é a primeira vez.

 

Comprimentos,

K@areca

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Cara, esse mais simples seu seria alguém fazer para você ?

Dê uma olhada no código fonte, esta bem explicado .. Boa Sorte !

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