Efeito Slidedown A Partir De Radio Button

#1 Careta

Novato no fórum

Usuários
1 posts

Sexo:Masculino

Posted 02/07/2010, 17:08

Olá pessoal,
Sou novo por aqui, não sei praticamente nada de javascript. Pesquisei bastante e não consegui encontrar nada sobre como criar efeitos slideDown e slideUp quando um radio button é selecionado.
Explicando melhor:
Tenho 2 botões de rádio e quando cada um deles é clicado, eu quero que uma caixa de texto ou div diferente seja mostrada.
Em outras palavras, as caixas de texto são ocultas quando os botões de rádio não são clicados, mas eles são exibidos quando um determinado botão é clicado.
Existe uma maneira de fazer isso em jquery?

Ficarei agradecido pelas dicas.

Edição feita por: Careta, 02/07/2010, 17:14.

#2 webbruno

Novato no fórum

Usuários
5 posts

Sexo:Não informado

Posted 04/09/2010, 19:27

Cara no intuito de te ajudar, como voce disse que nao entende muito de JS e com JQuery deve ser o mesmo, fiz um exemplo simples, veja se serve.

Tentei fazer uma coisa intuitiva sem muito dinamismo só pra voce ter uma ideia.

Abraços

<html>
<head>
<title>Exemplo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<style>
.naomostra
{
	display:none;
	width:200px;
	height:100px;
	margin:5px;
}
.c1
{
	background-color:blue;
}
.c2
{
	background-color:red;
}
</style>

<script>
$(function (){

	$("#dv1").show(300);

	$("#grupo input[type=radio]").live('click',function() {
		var valor = $(this).val();
		
		$("#dv1").hide(300);
		$("#dv2").hide(300);
		
		if (valor == 1)	$("#dv1").show(600);		
		else if (valor == 2) $("#dv2").show(600);
	});
});
</script>

</head>
<body>
<div id="grupo">
	<input type="radio" id="rExemplo1" name="rExemplo" value="1" checked="checked" />Input Radio 1
	<input type="radio" id="rExemplo2" name="rExemplo" value="2" />Input Radio 2
</div>
<div class="naomostra c1" id="dv1">Sou a div 1 que aparece para o radio 1</div>
<div class="naomostra c2" id="dv2">Sou a div 2 que aparece para o radio 2</div>
</body>
</html>

#3 Franklin Javier

Novato no fórum

Usuários
8 posts

Sexo:Masculino
Localidade:Sao Paulo

Posted 27/09/2010, 22:50

So complementando o que o nosso amigo de cima respondeu, se quiser o efeito slideDown troque o metodo show() pelo slideDown()

de

$("#dv1").show(600);

por

$("#dv1").slideDown(600);

Abcs

#1 Careta

#2 webbruno

#3 Franklin Javier

1 user(s) are reading this topic

Entrar