I have a div and inside it a header (h3) and a button, I want when I press this button, change the contents of the text and the button, with a new text and a new button with a fadeOut effect for the text / current button and FadeIn pro 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>
You can use fadeOut with callback by changing the text of the elements and ending with fadeIn .
See that I have selected H3 in .find("h3") and then button with .next() , since button is the next element after 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><divclass"h1 text">
<h3 class="ui header">O texto a ser alternado</h3>
<button class="ui button">button</button>
</div>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><!--Tenhoumadivedentrodelaumheader(h3)eumbutton,queroquequandoeupressioneessebutton,altereoconteúdodotextoedobutton,comumnovotextoeumnovobuttoncomumefeitofadeOutparaotexto/buttonatualeFadeInpronovotexto/button!comopossofazerisso?--><div><h3id="texto">Contador de clicks</h3>
<input id="botao" type="button" value="Clique">
</div>