javascript - jQuery 隐藏和显示不起作用

Question

我在一次事件中有以下内容:

function onclickEvent () {
     $.ajax({
       url: "somePage.html",
       beforeSend: function( xhr ) {   
            $('#Element1').hide("slow",function() {                                                                                                                              
                $('#Loading').show("slow");
            }); 

        }

     }).done(function( data ) {                   
          $('#Loading').hide("slow",function() {                                                                                                                    
             $('#Element1').show("slow");                                                     
          });                                                      
    });

}

第一次效果很好，但第二次(第二次单击)在“完成”ajax 中加载不会隐藏，始终可见。

我做错了什么？

Answer 1

您首先隐藏了 Element1，因此您需要在成功/完成时首先显示它。 show() 与 hide() 配对，反之亦然，似乎是根据优先级进行切换。看来这就是行为。您可能需要进一步阅读这些函数的文档。

<script src="jquery.min.js"></script>
<script>
function onclickEvent () {          
    $.ajax({
        url: "somePage.html",
        beforeSend: function( xhr ) {   
                $('#Element1').hide("slow",function() {                                                                                                                              
                    $('#Loading').show("slow");
                }); 
        }
    }).done(function( data ) {                   
        $('#Element1').show("slow", function() {
            $('#Loading').hide("slow");
        });
    });
};
</script>
<div id="Element1" style="display:block;">
    Element 1
</div>
<div id="Loading" style="display:none;">
    Loading
</div>
<button onclick="onclickEvent();">Click Me</button>

使用成功

function onclickEvent () {
    $.ajax({
        url: "somePage.html",
        beforeSend: function( xhr ) {   
            $('#Element1').hide("slow",function() {                                                                                                                              
                $('#Loading').show("slow");
            }); 
        },
        success: function( data ) {                   
            $('#Element1').show("slow", function() {
                $('#Loading').hide("slow");
            });
        }
    });
};