Publicado em 3 de mai.

Animate() jquery, so funciona no primeiro evento

Pessoal, me ajudem nessa bronca, estou criando uma função para ocutar o rodape de um site. ficara assim, quando clicar ele atera a classe e esconde e quando clicar de novo ele retorna para classe anterior e mostrar novamente o rodape. Quando clico pra mostrar funciona normal mais quando clico para renornar a função nao funciona mais.

segue o código

$(document).ready(function(){
	$(".setaOcultar").click(function(){
 $("#setaRecolhe").removeClass("setaOcultar");
 $(this).addClass("setaMostrar");
 $("footer").animate({
 marginBottom: "-210px"
 });

	});

	$(".setaMostrar").click(function(){
 $("#setaRecolhe").removeClass("setaMostrar");
 $(this).addClass("setaOcultar");
 $("footer").animate({
 marginBottom: "0px"
 });
	});

});

ficarei grato pela ajuda

abraço

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

JCMais· 3 de mai.

Isso ocorre porque no momento que você adiciona o evento aos elementos com a classe [inline]"setaMostrar"[/inline], não existe, ainda, nenhum elemento com esta classe, portanto, o evento não irá ser ativado. Mesmo que você adicione essa classe mais tarde a um elemento já existente, não irá funcionar.

Para isso, use delegação de eventos, primeiramente, adicione um wrapper para os controles, por exemplo:

<footer id="main-footer"></footer>

<div id="footer-display-control"><!-- o wrapper -->

 <div id="setaRecolher" class="setaOcultar"></div>

</div> E quando for adicionar o evento, adicione da seguinte forma:

jQuery( function( $ ) { //Mesma coisa que $( document ).ready( function(){

 var $footer = $( '#main-footer' );

 $( '#footer-display-control' ).on( 'click', '#setaRecolher', function() {

 var $this = $( this );

 if ( $this.hasClass( 'setaOcultar' ) ) {

 $this.removeClass( 'setaOcultar' ).addClass( 'setaMostrar' );
 $footer.animate({ marginBottom: '-210px' });

 } else if ( $this.hasClass( 'setaMostrar' ) ) {

 $this.removeClass( 'setaMostrar' ).addClass( 'setaOcultar' );
 $footer.animate({ marginBottom: '0' });

 }
 });

});

Leia: :seta: http://api.jquery.com/on/

Exemplo Online :seta: http://jsfiddle.net/JCMais/5q2n3/

marcello.alvess· 3 de mai.

Ótima dica do JCMais ,

Vou simplificar ainda mais rss

$(document).ready(function(){

	$("body").on("click", ".setaOcultar", function(){
 $("#setaRecolhe").removeClass("setaOcultar");
 $(this).addClass("setaMostrar");
 $("footer").animate({
 marginBottom: "-210px"
 }, 40);

	});

	$("body").on("click", ".setaMostrar", function(){
 $("#setaRecolhe").removeClass("setaMostrar");
 $(this).addClass("setaOcultar");
 $("footer").animate({
 marginBottom: "0px"
 }, 40);
	});

});

Abraço :yes:

bytchello· 3 de mai.

Excelente, JCMais e marcello, valeu pela ajuda, funcionou certinho.

abraço