Text doesn't start centered when calling jquery's show('slow') and hide('slow')

Question

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?

Answer 1

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');
});

http://jsfiddle.net/cpWaa/

Answer 2

You should try to explicitly declare the height and width of the losing div.

  
(#)loading{
  width:100%;
  height:50px;
  }

Answer 3

If someone is looking for this answer I found the solution, using the fadeIn and fadeOut that @AlienHoboken said and calling the jquery 'animation'. here is the full code

<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 () {

        $("#btnShow").click(function () {
            $("#loading").animate({
                left: '+=50',
                height: 'toggle'
            }, 500, function() {
                $("#loading").fadeIn(300);
            });
        });
        $("#btnHide").click(function () {
            $("#loading").animate({
                left: '+=50',
                height: 'toggle'
            }, 500, function () {
                $("#loading").fadeOut(300);
            });
        });
    })

</script>

<style type="text/css">
    #loading
    {
        text-align: center;
    }
</style>

Answer 4

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!