From JQuery doc:
When a duration, a plain object, or a "complete" function is provided, .show() becomes an >animation method. The .show() method animates the width, height, and opacity of the matched >elements simultaneously.
When you specify a duration in show(), this is the default behavior, to slide from one side until reaches its position.
I suppose you are looking for a fadein fadeout effect, which has its own function in JQuery:
<script>
$(function () {
$("#loading").hide(); #this one you can keep it, is not animated
$("#btnShow").click(function() {
$("#loading").fadein('slow');
});
$("#btnHide").click(function () {
$("#loading").fadeout('slow');
});
})
</script>
Although, I would rather suggest to use animate() function, as it is more complete and you have more control on what is actually changing:
<script>
$(function () {
$("#loading").hide());
$("#btnShow").click(function() {
$("#loading").animate({
opacity:1, //same as fading in
display:"block" //hide() has set display:"none"
}, 'slow');
});
$("#btnHide").click(function () {
$("#loading").animate({
opacity:0, //same as fading out
display:"none" //same as hide()
}, 'slow');
});
})
</script>
Hope this helps!