jQuery mobile button gets distorted when I use .show() and .hide()

Question

When I use .hide() on a button in jQuery mobile initially its hides the button . when i use .show() property on it the UI gets distorted . Somehow the .button('refresh') similar to .listview('refresh') is not working .

I have recreated the bug in jsfiddle link

$('#page1').live('pageshow', function () {
    $("#showbtn1").click(function(){
       $("#btn1").show();
       $("#btn2").hide();
       $.mobile.changePage("#page2");        
    });
    $("#showbtn2").click(function(){
       $("#btn1").hide();
       $("#btn2").show();
       $.mobile.changePage("#page2");     
    });    
});    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet"/>

<div id="page1" data-role="page">

    <div data-role="header">
        <a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-rel="back"></a> 
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>To recreate the bug <p>
        <p> 1.click on show button 1 </p>
        <p> 2.click back </p>
        <p> 3.click on show button 2 </p>
        <p> 4.button is distorted </p>
            
        <a id="showbtn1"  href="#" data-role="button">show only button 1</a>
         <a id="showbtn2" href="#" data-role="button">show only button 2</a>           
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
    
<div id="page2" data-role="page">

    <div data-role="header">
        <a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-rel="back"></a> 
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <a id="btn1" href="#" data-role="button">button 1</a>
        <a id="btn2" href="#" data-role="button">button 2</a>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Any help is appreciated .

Thanks.

Answer 1

show() and hide() method adds "display: none" property which created effect like removing buttons from DOM. instead try css("visibility","visible") and "hidden" that will make just invisible and no distortion.

Answer 2

After having no luck with visibility (because of positioning issues), the only solution I came across that worked without fail was to create a CSS class and then add/remove it to hide/show it:

$('.hide_me').addClass("vanish");
$('.show_me').removeClass("vanish");

and the css:

.vanish {
  display: none;
}