[Resolvido] Problema com add/removeClass()

[LucasFerreira_ 0]

HTML:

<div id="featurednews">
	<div id="slide1" class="box selected">
		<div class="news">
			<h1><a href="">"Busão do Brasil" não deverá ganhar nova temporada na Band</a></h1>
			<p>O principal motivo foi a baixa audiência alcançada pela primeira edição do programa, que terminou na última terça (19) registrando modestos 2 pontos de média. O índice foi inferior ao da estreira, em 30 de julho, que marcou 3,3 pontos na Grande São Paulo...</p>
			<a class="readmore">leia mais</a>
		</div>
		<div class="newsshot">
			<a href=""><img src="images/news/medium/nw1.png" alt="Foto da Noticia" /></a>
		</div>
	</div>
	<div id="slide2" class="box">
		<div class="news">
			<h1><a href="">“Teleton 2010″ começa hoje</a></h1>
			<p>Nesta sexta-feira (5) começa a edição de 2010 do Teleton...</p>
			<a class="readmore">leia mais</a>
		</div>
		<div class="newsshot">
			<a href=""><img src="images/news/medium/nw2.png" alt="Foto da Noticia" /></a>
		</div>
	</div>
	<div id="slide3" class="box">
		<div class="news">
			<h1><a href="">Record conta com apoio de cinco clubes para adquirir o Brasileirão</a></h1>
			<p>A Record está trabalhando nos bastidores para garantir os direitos do Campeonato Brasileiro de 2012. Para isso, vem mantendo conversas com o Clube dos 13, entidade que representa as maiores equipes de futebol do país, e com os clubes...</p>
			<a class="readmore">leia mais</a>
		</div>
		<div class="newsshot">
			<a href=""><img src="images/news/medium/nw3.png" alt="Foto da Noticia" /></a>
		</div>
	</div>
	<div id="clear"></div>
</div>

CSS:

#featurednews {
		max-height: 270px;
	}
	
	#featurednews .box {
		position: relative;
		top: -250px;
		z-index: 2;
	}

	#featurednews .selected {
		background-color: #FFF;
		height: 250px;
		top: 0;
		z-index: 3;
	}
	
		#featurednews .selected .news {
			float: left;
			height: 250px;
			padding: 10px;
			width: 580px;
		}
		
			#featurednews .selected .news h1 a {
				color: #000;
				font-family: SegoeUI, "Segoe UI", "Trebuchet MS";
				font-size: 28px;
				text-decoration: none;
			}
			
			#featurednews .selected .newsshot {
				float: left;
				height: 250px;
				padding: 10px;
				width: 380px;
			}
			
	.clear {
		clear: both;
	}

JS:

$(document).ready(function() {
	$("#bolinha1").click(function(){
		$("#slide1").removeClass("selected");
		$("#slide2").addClass("selected");
		$("#slide3").removeClass("selected");
	}
}

Código do botão:

<a href="#" id="bolinha1"><img src="images/layout/bolinha.png" alt="Passar Slide" /></a>

Quando eu clico no link nao funciona as alterações. Qual meu erro?

[Alex Hiroshi 7]

Feche os parênteses do ready e do click.

[LucasFerreira_ 0]

Hm... continua sem funcionar :P

[LucasFerreira_ 0]

$(document).ready(function() {
	$("#bolinha1").click(function(){
		$("#slide1").removeClass("selected");
		$("#slide2").addClass("selected");
		$("#slide3").removeClass("selected");
	})
})

Ficou assim, mas de qualquer maneira não funciona...

Outra coisa, alguem pode me explicar como faz a animação de hide e show?

[Alex Hiroshi 7]

Você usa o Firefox com o Firebug? Dá algum erro?

 

Hide e show é como se você fosse aplicar ou remover uma classe, é só trocar o removeClass por hide ou show.

[LucasFerreira_ 0]

E como faço pra os dois segundos divs já começarem escondidos?

 

Ficaria assim?

$(document).ready(function(){  
	$("#slide2").Hide('slow');
	$("#slide3").Hide('slow');
	$(".show1").click(function(){
		$("#slide1").Show('slow');
		$("#slide2").Hide('slow');
		$("#slide3").Hide('slow');
	});
	$(".show2").click(function(){
		$("#slide1").Hide('slow');
		$("#slide2").Show('slow');
		$("#slide3").Hide('slow');
	});
	$(".show3").click(function(){
		$("#slide1").Hide('slow');
		$("#slide2").Hide('slow');
		$("#slide3").Show('slow');
	});
});

[Alex Hiroshi 7]

Sim. Mas show e hide são em minúsculo, sem nenhum maiúsculo.

[William Bruno 1501]

dá uma olhada nesse accordion, é o mesmo principio:

http://forum.imasters.com.br/index.php?/topic/409710-menu-accordion-aberto-apos-link/

[LucasFerreira_ 0]

Pra ficar a animação consegui fazer assim:

$(document).ready(function(){  
	$("#slide2").hide(0);
	$("#slide3").hide(0);
	$(".show1").click(function(){
		$("#slide2").fadeOut(0);
		$("#slide3").fadeOut(0);
		$("#slide1").fadeIn(1000);
	});
	$(".show2").click(function(){
		$("#slide1").fadeOut(0);
		$("#slide3").fadeOut(0);
		$("#slide2").fadeIn(1000);
	});
	$(".show3").click(function(){
		$("#slide1").fadeOut(0);
		$("#slide2").fadeOut(0);
		$("#slide3").fadeIn(1000);
	});
});

Obrigado : ) podem marcar o tópico como resolvido.