[Resolvido] Jquery - Desabilitar botões durante o efeito

[Luka Moura 0]

Olá!

Estou com o seguinte problema.

 

Tenho 3 botões:

<div class="divbtnsfloat" id="btnp1" onclick="selec_btn(1,3);"><img src="images/btn_1.png" border="0" /></div>
<div class="divbtnsfloat" id="btnp2" onclick="selec_btn(2,3);"><img src="images/btn_2.png" border="0" /></div>
<div class="divbtnsfloat" id="btnp3" onclick="selec_btn(3,3);"><img src="images/btn_3.png" border="0" /></div>

Quando eu clico no btnp1 acontece o seguinte efeito:

$("#btnp1")
.click(function(){
	$("#bloco_1")
		.hide()
		.show('slow');
	$("#bloco_2").hide();
	$("#bloco_3").hide();
});

E isso é a mesma coisa para os outros 2 botões.

 

O meu problema é:

Quando eu clico em um botão, durante esse efeito de abrir o conteúdo se eu clicar em outro botão aparecem o conteúdo dos 2.

 

O certo seria:

Durante o efeito de 1 deles, os outros ficam aparentes, mas não habilitados para clicar. Porque obrigatoriamente um apenas pode ser clicado por vez.

 

Consegui explicar?

 

Obrigada!!

Luka.

[visitante_xp 0]

Teoricamente seria isso:

 

$("#btnp1")
.click(function(){
        $("#bloco_1")
                .hide()
                .show('slow');
        $("#bloco_2").hide();
        $("#bloco_3").hide();
    	
    	$("#bloco_2").setAttribute("disable", "true");
        $("#bloco_3").setAttribute("disable", "true");
    	});

Num testei não, olha ai. Da uma olhada tmb no site do jquery e procura as funções relacionadas ao que você quer...

 

Abraço!

[Luka Moura 0]

Não funcionou! :(

Por favor, me ajude!

Obrigada!

Luka.

[William Bruno 1501]

disabled não vai dar certo, pois isso não é realmente um botão.

é uma div com um evento onclick.

 

Primeiro:

-> Remova a marcação inline do HTML

-> Desatrele com um unbind()(jQuery), a função do evento click, assim que algum efeito for chamado.

-> No final da animação, atrele novamente com um bind()(jQuery)

 

E estará feito.

[Luka Moura 0]

Olá! Estou quase entendo tudo..

Obrigada pela ajuda e paciência!

 

Primeiro:

-> Remova a marcação inline do HTML

(como foi tirado o onClick, qdo a pagina eh iniciada eu coloco o click com o bind)

$(document).ready(function(){
    $("#bloco_1").bind('click', function () {selec_btn(1,3);} );
    $("#bloco_2").bind('click', function () {selec_btn(2,3);} );
    $("#bloco_3").bind('click', function () {selec_btn(3,3);} );
});

(tirei o onClick do div)

<div class="divbtnsfloat" id="btnp1"><img src="images/btn_1.png" border="0" /></div>
<div class="divbtnsfloat" id="btnp2"><img src="images/btn_2.png" border="0" /></div>
<div class="divbtnsfloat" id="btnp3"><img src="images/btn_3.png" border="0" /></div>

-> Desatrele com um unbind()(jQuery), a função do evento click, assim que algum efeito for chamado.

$("#btnp1")
.click(function(){
        $("#bloco_2").unbind('click');
        $("#bloco_3").unbind('click');
        $("#bloco_1")
                .hide()
                .show('slow');
        $("#bloco_2").hide();
        $("#bloco_3").hide();
});

-> No final da animação, atrele novamente com um bind()(jQuery)

$("#btnp1")
.click(function(){
        $("#bloco_2").unbind('click');
        $("#bloco_3").unbind('click');
        $("#bloco_1")
                .hide()
                .show('slow');
        $("#bloco_2").hide();
        $("#bloco_3").hide();
        $("#bloco_2").bind('click');
        $("#bloco_3").bind('click');
});

[/b]

 

Mesmo assim nao funcionou! :(

Luka.

[Eloy Vieira 0]

é bem simples.. a cada ação do botão você deve "parar" a animação anterior, ao inves de desabilitar o botão, pois voce poderá clicar em todos os botoes e todas as ações funcionaram deixar a aparencia bem melhor de funcionalidade.

$("#btnp1").click(function(){	
        $("#bloco_2").stop(true, true).hide();
        $("#bloco_3").stop(true, true).hide();
        $("#bloco_1")
		.stop(true, true)
                .hide()
                .show('slow');
});

stop(true, true) é para limpar a espera e ir ate o final, essa opcao permite clicar no mesmo botao rapidamente e mesmo assim funcionar.

[Luka Moura 0]

é bem simples.. a cada ação do botão você deve "parar" a animação anterior, ao inves de desabilitar o botão, pois voce poderá clicar em todos os botoes e todas as ações funcionaram deixar a aparencia bem melhor de funcionalidade.

$("#btnp1").click(function(){	
        $("#bloco_2").stop(true, true).hide();
        $("#bloco_3").stop(true, true).hide();
        $("#bloco_1")
		.stop(true, true)
                .hide()
                .show('slow');
});

stop(true, true) é para limpar a espera e ir ate o final, essa opcao permite clicar no mesmo botao rapidamente e mesmo assim funcionar.

 

Obrigada!!! Consegui!!!