javascript - Fade Multipie Texts with Buttons Click -

i want make text box or area in website, , have 9 buttons in page don't want redirect other pages , open in same page , in same text box or area create.

so, if click on button 1, open text 1 , picture(s) fades in animation, , when click on button 2, text 1 box fades out , text 2 picture(s) fades in , etc. how can this?

i have tried codes

$('.one').hide(); $('.two').hide(); $('.three').hide();  $('.btn1').click(function () {     $('.one').fadein(); });  $('.btn2').click(function () {     $('.one').fadeout();     $('.two').fadein();  });  $('.btn3').click(function () {     $('.two').fadeout();     $('.three').fadein(); }); 

fiddle

but when click buttons , buttons position not fixed , move text animation.

is there ways same other codes?

$('.one').hide(); $('.two').hide(); $('.three').hide(); $('.btnall').hide(); $('.btn1').click(function () {     $.when($('.btnall').fadeout()).done(function(){     $('.one').fadein();    }); });  $('.btn2').click(function () {     $.when($('.btnall').fadeout()).done(function(){          $('.two').fadein();     });   });  $('.btn3').click(function () {    $.when($('.btnall').fadeout()).done(function(){     $('.three').fadein();    }); }); 

i think need. updated fiddle