CODEWITHSUNDEEP
javascriptjqueryhtmlfade
Zim3r
Zim3r

Reputation: 608

Div doesn't fade out after completion in jQuery

#cal div doesn't fade out after completion in jQuery.

<div id="main">
    <div id="price"></div>
    <div id="cal">Calculating...</div>
</div>

And here is my Javascript/jQuery code:

<script type="text/javascript">
    $('#cal').hide();
    $('#price_submit').click(function() {
        var my_data = {
            //successfully sends data
        };

        $('#price').fadeOut('fast', function(){
          $('#cal').fadeIn(); 
        });

        $.ajax({
            url: "proccess.php",
            type: 'POST',
            data: my_data,
            success: function(msg){
              $('#cal').fadeOut('fast', function() {
                  $('#price').fadeIn().html(msg);
              });
            }
        });
        return false;
    });
</script>

at last it will successfully retrieve data and shows it but it still shows the #cal div bellow price. I'd appreciate your help.

Upvotes: 0

Views: 272

Answers (2)

Artur Małecki
Artur Małecki

Reputation: 1506

I have just put your code

$('#cal').hide();

$('#price_submit').click(function() {
  var my_data = {
    //successfully sends data
  };

  $('#price').fadeOut('fast', function(){
    $('#cal').fadeIn(); 
  });
  $.ajax({
    url: "/echo/json",
    type: 'POST',
    data: my_data,
    success: function(msg){
        msg = '1134141234';
        $('#cal').fadeOut('fast', function() {
            $('#price').fadeIn().html(msg);
        });
      }
    }
  );
  return false;
});

on

http://jsfiddle.net/pfpqv/ and it works just fine.

Can you give some more info to proper reproduce this your problem?

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

I'll suggest you to stop previous animations and see:

$('#cal').stop().fadeOut('fast', function () {
    $('#price').stop().fadeIn().html(msg);
});

Upvotes: 6

Related Questions