0

Clicando no botão Fade a div some e em seguida clicando no botão UnFade a div reaparece. Até ai tudo bem.

Se em seguida clicar de novo no botão Fade, a div desaparece, aparece e desaparece de novo.

Se em seguida clicar no botão UnFade, a div aparece, desaparece e aparece de novo.

Se em seguida clicar de novo em fade, a div desaparece, aparece, desaparece, aparece e desaparece novamente.

Então se você clicar alternadamente 10 vezes em Fade e UnFade vai ver que a div vai e volta 10 vezes. Gostaria de saber se tem jeito de evitar isso. Se clicar em fade desaparece e em Unfade aparece independentemente do número de vezes que foram clicados alternadamente.

function functionHide() {
  $("div").hide(1000);
}
function functionShow() {
  $("div").show(1000);
}


$( "#id1" ).click(function() {
  $( "body" ).click(functionHide);
});

$( "#id2" ).click(function() {
  $( "body" ).click (functionShow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button id="id1">Fade</button>
<button id="id2">UnFade</button>

<div>Click!</div>

1
  • É um pouco difícil tentar perceber o que precisas realmente. Já experimentaste adicionar um monitor de eventos ?
    – Edilson
    8/04/2017 às 5:11

2 Respostas 2

0

O $("body").click(...) no seu código não faz sentido, principalmente estando dentro de outro click.

O que seu código estava fazendo era, cada vez que se clicava no botão, você apendava um novo event handler ao elemento body, que ia ser executado quando o body fosse clicado. Por isso a cada clique a ação era executada uma vez mais, pois os event handlers iam sendo adicionandos e os antigos continuavam lá.

$(document).ready(function() {
  function functionHide() {
    $("div").hide(1000);
  }
  function functionShow() {
    $("div").show(1000);
  }


  $( "#id1" ).click(functionHide);

  $( "#id2" ).click(functionShow);
})
3
  • Acho que minha explicação está clara, faça o que está dito executando o código que vais perceber o que ocorre. Se clicar em fade a div some. Clique em UnFade ele aparece. Clique em Fade a div some, aparece e some. Isso que quero bloquear. Com relação ao seu código não consegui fazer NEM funcionar.
    – user60252
    8/04/2017 às 6:23
  • Se NEM funcionou é porque, no seu HTML, você está adicionado o script antes de ter adicionando os botões, aí na hora que ele executar não vai encontrar os botões, pois eles não existem ainda. Ou você inclui o javascript depois dos elementos, ou engloba todo o código javascript dentro de um $(document).ready(). Vou atualizar a resposta com essa segunda opção, pra ficar mais claro. Faça o que está dito que vais perceber que funciona.
    – luislhl
    8/04/2017 às 13:45
  • Valeu, é isso mesmo! Esqueci desse detalhe.
    – user60252
    8/04/2017 às 13:49
0

Já visualizei seu problema amigo.

function functionHide() {
    $("div").hide(1000);
}

function functionShow() {
    $("div").show(1000);
}

A declaração das funções acima estão ok. O problema é como você está fazendo para chama-las. Pelo que entendi, você tem um botão que ao clicar, você esconde algo ou exibe, através das funções previamente declaradas. Logo ficaria simplesmente assim:

$("#id1").click(function() {
    functionHide();
});

$("#id2").click(function() {
    functionShow();
});

Seu erro foi tentar complicar a chamada das funções utilizando um $("body").click() que não tem nenhuma finalidade dentro da sua necessidade.

function functionHide() {
  $("div").hide(1000);
}
function functionShow() {
  $("div").show(1000);
}

$("#id1").click(function() {
    functionHide();
});

$("#id2").click(function() {
    functionShow();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button id="id1">Fade</button>
<button id="id2">UnFade</button>

<div>Click!</div>

2
  • Beleza, funcionou legal. Porque o script tem que ficar depois dos botões pra que funcione?
    – user60252
    8/04/2017 às 13:46
  • Não necessariamente. A ordem que deve ser respeitada é a inclusão do script do Jquery e em seguida seus comandos de programação. 8/04/2017 às 13:48

Você deve fazer log-in para responder a esta pergunta.