Ir para conteúdo

POWERED BY:

Arquivado

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

Sidney Simpsons

Transição com JavaScript

Por , em Javascript

Recommended Posts

Sidney Simpsons    0

Sidney Simpsons
Postado

Eu fiz script no meu html que quando o usuário passa o mouse por cima da imagem, ela muda de cor, mas eu quero que essa transição seja suave, lenta, e não rápida desse jeito, sera que alguém pode me ajudar ?

aqui esta o html:

 

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Menu do Site</title>
   <link rel="stylesheet" href="estilo_menu.css" type="text/css" media="all">
   <script type="text/javascript" src="scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#menu li ul").hide();
	$("#menu li").hover(
		function(){$(this).children("ul").slideDown();},
		function(){$(this).children("ul").slideUp();}
	);	
});
</script>
<script LANGUAGE="Javascript1.1">
function bart () { 
document.images["homeButton"].src="bart-1.jpg"
} 
function bart_sai() { 
document.images["homeButton"].src="bart.jpg" 
}
</SCRIPT>
<script LANGUAGE="Javascript1.1">
function bart2() { 
document.images["homeButton"].src="bart-2.jpg" 
} 
</SCRIPT>
<script LANGUAGE="Javascript1.1">
function bart3() { 
document.images["homeButton"].src="bart-3.jpg" 
} 
</SCRIPT>
</head>
<body>
<ul class="menu">
   	<li class="verde">
       	<a href="#" onMouseOver="bart();" onmouseOut="bart_sai();">Home</a>
       </li>
       <li class="amarelo">
       	<a href="#" onMouseOver="bart2();" onmouseOut="bart_sai();">Empresa</a>
       </li>
       <li class="azul" >
       	<a href="#" onMouseOver="bart3();" onmouseOut="bart_sai();">Serviços</a>
       </li>
   </ul>
   <IMG class="bart" SRC="bart.jpg" name="homeButton" width=200 height=400>
</body>
</html>

 

 

 

E aqui esta o css do html:

 

 

*{margin:0; padding:0}

body{
background:#000;
background-repeat:no-repeat;
width:768px;
height: 450px;
position:static;
}

/* Formatação do Menu Principal */

.menu{
list-style:none;  
float:left;
}

.menu li{
position:relative; 
float:left; 
}

.menu li a{
font-size:1.3em;
color:#fff;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
text-decoration:none;
padding:10px 20px;
display:block;
position:relative;
font-family:Tahoma, Geneva, sans-serif;
-webkit-transition: all 0.5s linear;
}

.menu li a:hover{
-webkit-transition: all 0.5s linear;
color:#fff;
text-shadow:0px 0px 5px #fff;
}

/* Cores dos Menus */

.verde{background:#D52100;}  
.amarelo{background:#FBC700;}  
.azul{background:#6AA63B;}

img{
-webkit-transition: 2.0s linear;
border:#FFF 1px solid;
margin: 100px 0px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Você está usando o Chrome?

-webkit-transition: all 0.5s linear;

Só funciona no Chrome ou no Safari...

 

Se quer que a transição seja mais gradual, aumente o tempo acima de 0.5s para um valor maior...

 

Pelo que vejo, não está usando Jasvascript, só CSS3.

Se você não tem intenção de usar Javascript, me avise para que eu mova o tópico para o local correto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sidney Simpsons    0

Sidney Simpsons
Postado

Você está usando o Chrome?

-webkit-transition: all 0.5s linear;

Só funciona no Chrome ou no Safari...

 

Se quer que a transição seja mais gradual, aumente o tempo acima de 0.5s para um valor maior...

 

Pelo que vejo, não está usando Jasvascript, só CSS3.

Se você não tem intenção de usar Javascript, me avise para que eu mova o tópico para o local correto.

 

Eu estou usando um poquinho de javascript logo no <head>, é que eu fiz um menu que quando a pessoa passa o mouse na home (por exemplo) o bart que era normal fica verde tbm, eu fiz essa transição com 3 imagens do bart com as cores dos botões. Eu ja tentei formatar pelo css mas não consegui pq se tratam de imagens que estão no javascript, por isso, queria saber se tem algum comando em javascript que faz com que a transição fique mais suave.

Obrigado pela ajuda

 

Me ajudem por favor !!!

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