Publicado em 15 de jul.

Ao clicar executar uma função css

Gente preciso de uma ajudinha.

tenho esse efeito aqui -Clique aqui

queria que quando eu clicar no link <a></a> executrase o tal efeito. porém a div que faz o giro tem duas class veja . #r3d_container:hover #r3d_text, #r3d_container.hover_effect #r3d_text já achei alguns codigo mas como faz nas duas class o java não executa.

Resumindo:

Cliquei no link executar o efeito a div some. pronto. !

vlw desde já.

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

cristianoolv· 16 de jul.

Vê se ajuda:

<html>
<head>
<title>Teste</title>
<script type="text/javascript">
window.onload = function(){

 function el(id){ return document.getElementById(id); }

 el("link").onclick = function(){

 el("div").style.width = "100%";
 el("div").style.height = "100%";
 el("div").style.background = "#069";
 el("div").style.webkitTransform = "rotateY(180deg)";
 }
}

</script>
<style>
 *{ border: 0; margin: 0;}
#div {
 width: 100px;
 height: 100px;
 background: #066;
 transition:all 0.3s linear;
}
</style>

</head>
<body>
<a href="#" id="link">Teste</a>
<div id="div"></div>

</body>
</html>

Clevton Ferreira· 16 de jul.

Cara achei esse codigo aqui que apece toda vez que carrega apagina tem como tu me ajuda masi um poquinho e fazer aquele efeito se excutado nessa codigo. tipo continuar no carregamento mesmo só que com o efeito acima.

pode ser sem clicar mesmo.

#preloader {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: #333; /* change if the mask should have another color then white */
	z-index:999999; /* makes sure it stays on top */
	transition:all 0.3s linear;
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background:none; /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}
</style>

<div id="preloader">
	<div id="status">Carregando !</div>
</div>
 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<script type="text/javascript">
	//<![CDATA[
	$(window).load(function() { // makes sure the whole site is loaded
	$("#status").fadeOut(); // will first fade out the loading animation
	$("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
 })
	//]]>
</script>