Animate() jquery, so funciona no primeiro evento

[bytchello 0]

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

 

[JCMais 75]

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 0]

Ó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 0]

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

 

abraço