I'm have a little trouble with this jquery show('slow') and hide('slow'). I have a div, and inside it I have a ajax loading gif that appears when I'm doing some processing, here is a simple example:
<input type="button" id="btnShow" value="Show"/>
<input type="button" id="btnHide" value="Hide"/>
<div id="loading"><img src="~/Content/ajax-loader.gif" /></div>
<script type="text/javascript">
$(function () {
$("#loading").hide();
$("#btnShow").click(function() {
$("#loading").show('slow');
});
$("#btnHide").click(function () {
$("#loading").hide('slow');
});
})
</script>
<style type="text/css">
#loading{
text-align: center;
}
</style>
The problem is, the content should be centered on the div, but when I click on "btnShow" it starts on the left and goes to the middle when it's completely opened... The sam thing happens when I hide it... The loading gif is on the middle and when it's closing it goes to the left... How could I prevent this from happening?
You want the fadeIn
and fadeOut
functions, not the show
and hide
. This should do it for you. Just replace the relevant code. =]
$("#btnShow").click(function() {
$("#loading").fadeIn('slow');
});
$("#btnHide").click(function () {
$("#loading").fadeOut('slow');
});