Ir para conteúdo

Arquivado

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

André Wielki

Abrir Div "de cima para baixo" em aproximadamente 1 segundo

Por , em Javascript

Recommended Posts

André Wielki    6

André Wielki
Postado

Eu nao sei explicar muito bem, mas o que eu quero é que ao clicar em cima de um link, apareça um DIV que esta com display none na página.

 

Até ai tudo bem a gente coloca um codigo javascript para trocar o display dele para bock puxando pelo Id.

Mas o que eu quero é que nao mostre imediatamente todo o Div, e sim vá abrindo de cima para baixo o div em aproximadamente 1 segundo, apenas o efeito, entendeste?

 

Como posso fazer isto ...

Compartilhar este post

Link para o post
Compartilhar em outros sites

CL4nG    36

CL4nG
Postado

Isso é feito com jQuery.

<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
$(document).ready(function(){
$( "#abrir" ).click(function() {
$( "#content" ).show("slow", function() {
   //o conteúdo está sendo mostrado...
});
});
});
</script>
</head>
<body>


<div id="content" style="display:none;border:1px solid red;height:100px;"><p>Mostrando div com efeito slow</p></div>
<a href="#" id="abrir">Ver</a>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Wielki    6

André Wielki
Postado

Eu consegui fazer funcionar seu código, mas ele somente me permite abrir o Div, e quando eu quero fechar o DIV de forma normal mesmo sem o efeito contrário, eu clico e ele sempre abre o DIV.

 

Teria como me ajudar, para quando o DIV aberto, ele dar um style display none ?

 

No arquivo html eu tenho o seguinte:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title><?php echo "$tituloGeral"; ?></title>
<meta charset="ISO 8859-1">
<meta name="author" content="André Silveira Machado" />
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<script src="js/script.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Inicio da referencia ao ficheiro lightbox -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
<!-- Fim da referencia ao ficheiro lightbox -->
<script>
$(document).ready(function(){
MENU_OPENCLOSE();
});
</script>
</head>
<body>
<div id = "menu-sessao" onclick="MENU_OPENCLOSE()" class="help-text fr <?php if (isset($page)) { if ($page=="sessao"){?> active <?php } }?>"><a href="#">MAIN MENU</a></div>
</body>
E no arquivo script.js eu tenho o seguinte:
function MENU_OPENCLOSE() {
$( "#menu-sessao" ).click(function() { $( "#JS-Sessao" ).show("slow", function() { }); });
//document.getElementById("JS-Sessao").style.display = "none";
//document.getElementById("menu-sessao").style.fontWeight = "normal";
}

 

 

Meu código anterior funcionava direitinho, porém não fazia o efeito ao abrir o div.

O código anterior era o seguinte:

var TR = 0;
function MENU_OPENCLOSE() {
if (TR != 1) {
document.getElementById("JS-Sessao").style.display = "block";
document.getElementById("menu-sessao").style.fontWeight = "bold";
TR = 1;
} else {
document.getElementById("JS-Sessao").style.display = "none";
document.getElementById("menu-sessao").style.fontWeight = "normal";
TR = 0;
}
}

Eu só preciso seguir o padrao do codigo anterior, para que funcione ao clicar em cima dele pela segunda vez, troque o display para none devolta, podes me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Wielki    6

André Wielki
Postado

 

Olá André

 

Utilize a função toggle do jquery: http://api.jquery.com/toggle/, se o elemento estiver visivel ele vai ocultar e vice-versa

$( "#JS-Sessao" ).toggle("slow");

 

Tentei alterar meu function para o seguinte codigo abaixo, mas ele ficou punhetiando abrindo e fechando umas 5 vezes para só depois parar fechado com efeito em ambos tanto no abrir quanto no fechar.

Poderia me ajudar a concluir o código pois sou novo no Javascript ...

 

O correto seria ao clicar entao abrir, e ao clicar denovo entao fechar.

 

Ele esta abrindo e fechando diversas vezes ao clicar tanto na primeira quanto na segunda vez ...

 

script.js

/* JS SESSAO DIV ABRIR E FECHAR
-------------------------------------------- */
function MENU_OPENCLOSE() {
        $( "#menu-sessao" ).click(function() {
            $( "#JS-Sessao" ).toggle("slow", function() {            });
        });
        //document.getElementById("JS-Sessao").style.display = "none";
        //document.getElementById("menu-sessao").style.fontWeight = "normal";
}

Tem aquela inicialização minha na pagina do html também:

<script src="js/script.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Inicio da referencia ao ficheiro lightbox -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
<!-- Fim da referencia ao ficheiro lightbox -->
<script>
$(document).ready(function(){
MENU_OPENCLOSE();
});
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

knoxzin1    2

knoxzin1
Postado

Não havia prestado atenção no seu código

 

Você está definindo um evento onclick no elemento

<div id = "menu-sessao" onclick="MENU_OPENCLOSE()" ....

sendo que a função ja implementa o evento de click

$( "#menu-sessao" ).click(function() { ....

É só se livrar de um dos dois que vai funcionar normal

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