0

#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 以下の価格が表示されます。よろしくお願いします。

4

2 に答える 2

6

以前のアニメーションを停止して、以下を確認することをお勧めします。

$('#cal').stop().fadeOut('fast', function () {
    $('#price').stop().fadeIn().html(msg);
});
于 2013-06-21T11:25:58.457 に答える
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;
});

の上

http://jsfiddle.net/pfpqv/で問題なく動作します。

この問題を適切に再現するために、さらに情報を提供できますか?

于 2013-06-21T11:37:12.977 に答える