Exemplos da aula 19

HTML

<!-- EXEMPLOS DAS FUNÇÕES SHOW, HIDE, TOOGLE  -->

<p>Deseja responder nossa enquete?</p>

<button id="bot">Responder</button><br><br>

<div id="divForm" style="display: none">
<p>Quantas horas de estudo você realiza por dia?</p>
<form name="form" action="#" method="GET">
<input type="radio" name="escHoras" value="hora1"> Pelo menos 1 hora
<br>
<input type="radio" name="escHoras" value="hora2"> Pelo menos 2 horas
<br>
<input type="radio" name="escHoras" value="hora3"> Pelo menos 3 hora
<br>
<input type="radio" name="escHoras" value="horaMais"> Mais de 3 horas
<br><br>
<input type="submit" name="botao" value="Enviar">
<br><br>
<button id="voltar">Voltar</button>
</form>
</div>

<!-- EXEMPLO DA FUNÇÃO DELAY  -->
<button id="b1">Conteudo 1</button>
<button id="b2">Conteudo 2</button>

<div id="conteudo1" style="display:none">
<h2>Titulo 1</h2>
<p>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>
Texto para conteúdo 1 Texto para conteúdo 1<br>

</p>
</div>

<div id="conteudo2" style="display:none">
<h2>Titulo 2</h2>
<p>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
Texto para conteúdo 2 Texto para conteúdo 2<br>
</p>
</div>

<br><br>

<!--EXEMPLO DAS FUNÇÕES FADEIN E FADEOUT-->
<input type="button" name="bot1" value="Anterior">
<input type="button" name="bot2" value="Próximo">
<br>
<img id="img1" src="img/img1.jpg"  width="400" height="200" style="position: absolute">
<img id="img1" src="img/img2.jpg"  width="400"  height="200" style="display: none; position: absolute">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!--EXEMPLO DAS FUNÇÕES FADETO-->
<div class="divLight">
Conteúdo em texto na camada divLight
</div>

Opacidade:
<input type="text" name="opacidade" size="5">%<br><br>
<input type="button" name="bot" value="Alterar Opacidade">

<!--EXEMPLO DAS FUNÇÕES FADETOGGLE-->
<p>Qual a função básica do jQuery?<a href=""> Ver resposta</a></p>
<p id="resposta" style="display: none">
Jquery foi feito para tornar mais simples a navegação<br>
do documento HTML, a seleção de elementos DOM e <br>
criar animações.
</p>

CSS

<style type="text/css">
.divLight {
width: 200px;
height: 200px;
background-color: gray;
margin-bottom: 10px;
}

</style>

JQUERY

/*AULA 19 - FUNÇÕES JQUERY 1*/

/*Função .show() e hide(): mostra um determinado elemento com o
comando .show() ou ocultá-lo com o comando .hide().*/

$(document).ready (
function() {
$("#bot").click(
function() {
$("p").hide();
$("#divForm").show();
});

$("#voltar").click(
function() {
$("p").show();
$("#divForm").hide();
});
});

/*Função .toggle(): realiza as mesmas funções dos comandos anteriores, mas
permite analisar se o elemento está visível ou não. Ela ainda permite os
mesmos parâmetros dos comandos anteriores.
*/

ocult = true;
$(document).ready (
function() {
$("#bot").click(
function() {
$("p").toggle("slow");
$("#divForm").toggle("slow");
if (ocult) {
document.getElementById('bot').innerHTML = 'Ocultar';
ocult = false;
} else {
document.getElementById('bot').innerHTML = 'Responder';
ocult = true;
}
});
});

/*Função .delay(): Programa par cada evento um tempo de espera
estimado em milessegundos como parâmetro. Pode ser combinada com outras funções.
*/


$(document).ready (
function() {
$("#b1").click(
function() {
$('div').add('p').hide();
$('#conteudo1').show('slow');
$('#conteudo1 p').show('slow');
});

$("#b2").click(
function() {
$('div').add('p').hide();
$('#conteudo2').show('slow');
$('#conteudo2 p').delay(1500).show('slow');
});


});

/*FUNÇÕES DE OPACIDADE: Podemos controlar a opacidade dos elementos tonando-o
totalmente opaco ou invisível, assim como o nível de opacidade com os comandos
.fadeIn, .fadeOut(), .fadeTo(), fadeToggle*/

$(document).ready (
function() {
$('input[name="bot1"]').click(
function() {
$("img").fadeOut('slow');
$("#img1").fadeIn('slow');
});

$('input[name="bot2"]').click(
function() {
$("img").fadeOut('slow');
$("#img2").fadeIn('slow');
});
});

/*Função fadeTo(): controla o nível de opacidade do elemento html*/

$(document).ready (
function() {
$('input[name="bot"]').click(
function() {
var valor = $('input[name="opacidade"]').val();
valor = valor/100;
$(".divLight").fadeTo("slow", valor);
});
});

/*Fadetoggle(): altera o modo de visibilidade de um elemento voltando a
seu estado origignal quando atividade novamente.
Sintaxe:
$("elemento").fadeToggle(velocidade);*/

$(document).ready (
function() {
$("a").hover(
function() {
$("#resposta").fadeToggle();
});
});