Discussoes de Programacao e Tecnologia

Problema Callback jQuery

6 respostas
H
hudson5

Estou com um problema num callback:

a função era fazer um slideUp na Div atual e depois disso dar um slideDown Div selecionada.

$(document).ready(function(){

$("a.link").click(function () {

$(".active").removeClass("active");
			
$(this).addClass("active");

	
$(".content").slideUp(400,function(){
			
// Problema aqui: uma Div sobe, mas não desce a outra

var content_show = $(this).attr("title");
$("#"+content_show).slideDown(400);
				
});
		  
});

});

Eu tentei tirar o callback e fazer separado, funciona, mas as duas coisas acontecem ao mesmo tempo.

Outro ponto estranho quando separa as funções:
ao clicar em um link ele executa as duas, se clicar no mesmo link quando ja está selecionado, ele faz o efeito certo de subir e depois descer

Se alguém puder ajudar, obrigado!

HTML:

<div id="tabbed_box_1" class="tabbed_box">

<div class="tabbed_area">   

<ul class="tabs">

<li><a href="#" title="content_1" class="tab active">Link 1</a></li>
<li><a href="#" title="content_2" class="tab">Link 2</a></li>
<li><a href="#" title="content_3" class="tab">Link 3</a></li>
<li><a href="#" title="content_4" class="tab">Link 4</a></li>
<li><a href="#" title="content_5" class="tab">Link 5</a></li>
<li><a href="#" title="content_6" class="tab">Link 6</a></li>

</ul>

<div style="text-align:center;" id="content_1" class="content">
conteudo 1
</div>

<div id="content_2" class="content">
conteudo 2
</div>

<div id="content_3" class="content">
conteudo 3
</div>

<div id="content_4" class="content">
conteudo 4
</div>

<div id="content_5" class="content">
conteudo 5
</div>

<div id="content_6" class="content">
conteudo 6
</div>
Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

6 Respostas

pdpbom
pdpbom

cara posta o html ae pra ter uma ideia de como esta a estrutura

abraço

H
hudson5

HTML postado

W
windsofhell

Acho que vc esta complicando muito, tem um attributo chamado fx que vc pode configurar com alguns efeitos, veja esse exemplo que eu fiz (eh soh copiar e colar numa pagina que vai funcionar).

<html>
<head>
	<title>tab test</title>	 
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
    <link rel="StyleSheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css"/>     	
	<script>	
		$(document).ready(function() {
			$( "#tabs" ).tabs({
				selected: 0,
				fx: { height: 'toggle', duration: 'slow' }
			});
	</script>
	
</head>
<body>
	<div class="demo">
	
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Nunc tincidunt</a></li>
			<li><a href="#tabs-2">Proin dolor</a></li>
			<li><a href="#tabs-3">Aenean lacinia</a></li>
		</ul>
		<div id="tabs-1">
			<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
		</div>
		<div id="tabs-2">
			<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
		</div>
		<div id="tabs-3">
			<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
			<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
		</div>
	</div>
	
	</div>
	
	<div class="demo-description" style="display: none; ">
	<p>Click tabs to swap between content that is broken into logical sections.</p>
	</div>
</body>

</html>

//Daniel

pdpbom
pdpbom

Não conhecia a função do amigo anterior…
tambem não sei muito bem qual era a ideia do teu exemplo
calculei que seria colocar o link clicado em negrito, esconder o que estava sendo mostrado e mostrar o do link
segue minha ideia para exemplo de que funciona o callback

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <style type="text/css">
			body {padding-top: 60px;}
			.center{text-align:center;visibility:display}
			.active{font-weight:bold; margin}
			.content{display:none}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				//funciona
				$("a").click(function () {
					$(".active").removeClass("active");	
					$(this).addClass("active");
					var content_show = $(this).attr("title");
					$(".center").slideUp(400,function(){
						$(".center").removeClass("center");	
						$("#"+content_show).addClass("center");
						$("#"+content_show).slideDown(3000);
					});
				});
				
			});
		</script>
	</head>
	<body>
		<div id="tabbed_box_1" class="tabbed_box">

			<div class="tabbed_area">   

				<ul class="tabs">

					<li><a href="#" title="content_1" class="tab active">Link 1</a></li>
					<li><a href="#" title="content_2" class="tab">Link 2</a></li>
					<li><a href="#" title="content_3" class="tab">Link 3</a></li>
					<li><a href="#" title="content_4" class="tab">Link 4</a></li>
					<li><a href="#" title="content_5" class="tab">Link 5</a></li>
					<li><a href="#" title="content_6" class="tab">Link 6</a></li>

				</ul>
				<div id="content_1" class="content center">
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 
					1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 
					1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 
					1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 
					1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 
					1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 
					1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 
					1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 
					1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
					conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 
					1conteudo 1conteudo 1conteudo 1conteudo 1conteudo 1
				</div>

				<div id="content_2" class="content">
					conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 
					conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 
					conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 
					conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 
					conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 
					conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 
					conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 
					conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 
					conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 
					conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 conteudo
					2 conteudo 2 conteudo 2 conteudo 2 conteudo 2 
				</div>

				<div id="content_3" class="content">
					conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3
					conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3
					conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3
					conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3
					conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3
					conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3
					conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3
					conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 
					3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3conteudo 3
				</div>

				<div id="content_4" class="content">
					conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4
					conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4
					conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4
					conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4
					conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4
					conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4
					conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4
					conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4
					conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4
					conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo
					4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4conteudo 4
				</div>

				<div id="content_5" class="content">
					conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
					5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 5conteudo 
				</div>

				<div id="content_6" class="content">
					conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
					6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 6conteudo 
				</div>
			</div>
	</body>
</html>

Exagerei um pouquinho nos texto mas assim da pra ver bem a execução

W
windsofhell

pdpbom, muito complicado.

Melhor usar o que o JQuery oferece e nao suar tanto. :slight_smile:

$(document).ready(function() {  
       $( "#tabs" ).tabs({  
            selected: 0,  // sempre seleciona a primeira Tab, quando a pagina eh carregada.
            fx: { height: 'toggle', duration: 'slow' }  // roda o efeito quando seleciona tab.
       });  
});

//Daniel

pdpbom
pdpbom

windsofhell, concordo :slight_smile: , alem de complicado fico “meio” porco … :oops:

mas é mais pra provar que o callback funciona

$(".center").slideUp(400,function(){  
                        $(".center").removeClass("center");   
                        $("#"+content_show).addClass("center");  
                        $("#"+content_show).slideDown(3000);  
                    });
Criado 4 de julho de 2012
Ultima resposta 5 de jul. de 2012
Respostas 6
Participantes 3

Topicos relacionados

Compilar e executar uma classe java pelo prompt do windows 13 respostas [RESOLVIDO] Como executar função JavaScript após página carregada 13 respostas Java.lang.OutOfMemoryError: Java heap space - Como resolver? 11 respostas Como consultar CPF na Receita Federal usando Web Service? 22 respostas Como acessar localhost de forma externa? [RESOLVIDO] 13 respostas
Alura O que é Python? — um guia completo para iniciar nessa linguagem de programação Acesse agora o guia sobre Python e inicie sua jornada nessa linguagem de programação: o que é e para que serve, sua sintaxe e como iniciar nela!
Casa do Codigo Guia pratico de TypeScript: Melhore suas aplicacoes... Por Thiago da Silva Adriano — Casa do Codigo