Question

#cal div在jQuery完成后不会淡出。

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

这是我的Javascript / jQuery代码：

<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>

最后它将成功检索数据并显示它，但它仍显示#cal div bellow价格。我很感激你的帮助。

Answer 1

我建议你停止以前的动画，然后看看：

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

Answer 2

我刚刚把你的代码

$('#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/它运作得很好。

您能否提供更多信息以正确重现您的问题？

Div在jQuery完成后不淡出

2 个答案: