fade toggle jquery

Asked

Viewed 137 times

1

I have a div and inside it a header (H3) and a button, I want when I press this button, change the content of the text and button, with a new text and a new button with a fadeOut effect for the current text/button and Fadein for the new text/button! how can I do this ? 

<div class"h1 text">
<h3 class="ui header">O texto a ser alternado</h3>
<button class="ui button">button</button
</div>
html jquery toggle fade

  • Instead of describing your html it would be better to include in the content of the question.

  • "I have a div" ok pole so we can help .

  • code added

2 answers

3


You can use fadeOut with callback modifying the text of the elements and ending with fadeIn.

See that I selected the H3 in .find("h3") and then the button with .next(), since the button is the next element after the 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

A playful example using 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>

Browser other questions tagged html jquery toggle fade

You are not signed in. Login or sign up in order to post.