1

Tenho uma div e dentro dela um header (h3) e um button, quero que quando eu pressione esse button, altere o conteúdo do texto e do button, com um novo texto e um novo button com um efeito fadeOut para o texto/button atual e FadeIn pro novo texto/button! como posso fazer isso ?

<div class"h1 text">
<h3 class="ui header">O texto a ser alternado</h3>
<button class="ui button">button</button
</div>
3
  • Ao invés de descrever seu html seria melhor incluir no conteúdo da pergunta. 28/12/2017 às 17:02
  • "Tenho uma div" ok poste para podermos ajudar . 28/12/2017 às 17:18
  • codigo adicionado
    – FoX
    28/12/2017 às 17:20

2 Respostas 2

3

Você pode usar fadeOut com callback alterando os textos dos elementos e finalizando com fadeIn.

Veja que selecionei o H3 em .find("h3") e em seguida o button com .next(), já que o button é o próximo elemento após o H3:

$(".ui.button").click(function(){
   $(this).closest("div").fadeOut( function(){
      // troca o texto do H3 e o texto do button
      // e faz fadeIn
      $(this)
      .closest("div")
      .fadeIn()
      .find("h3")
      .text("Novo texto no H3")
      .next()
      .text("novo texto do button");
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class"h1 text">
   <h3 class="ui header">O texto a ser alternado</h3>
   <button class="ui button">button</button>
</div>

1

Um exemplo lúdico utilizando Jquery

$(document).ready(function(){
  var contador = 0;
  $("#botao").on('click', function(){
    contador++;
    $(this).val("Yay!");    
    
    $("#texto").fadeOut(function(){ 
      $("#botao").fadeOut();
      
      $(this).html(contador + " cliques e contando..").fadeIn(function(){
          $("#botao").val("Clique").fadeIn();
      });  
      
    });
                  
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Tenho uma div e dentro dela um header (h3) e um button, quero que quando eu pressione esse button, altere o conteúdo do texto e do button, com um novo texto e um novo button com um efeito fadeOut para o texto/button atual e FadeIn pro novo texto/button! como posso fazer isso ? -->

<div>
  <h3 id="texto">Contador de clicks</h3>
  <input id="botao" type="button" value="Clique">
</div>

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .