加载器自动淡入(jQuery/javascript/Bootstrap）

Loader auto-fades in (jQuery/javascript/Bootstrap)

本文关键字：javascript Bootstrap jQuery 淡入 加载      更新时间：2023-09-26

我可能是个白痴，但我找不到问题出在哪里。

这个页面的底部有一个"建议一个单词"按钮。

在填写表单并点击发送后，会显示一个加载程序，但是，当ajax完成时，它并没有消失（它会意外地淡出和淡入）。

我不知道为什么它会再次消失，我也找不到背后的原因。

这是最重要的一段代码（我希望如此）。

$('#suggestQuestionModal').on('show.bs.modal', function (e) {

        var currFormGroup = 0;
        var maxFormGroups = 4;
        //while(currFormGroup < maxFormGroups) {

            $('#suggestionSend').click(function() {
                if (validator.form()) {
                $("#suggestQuestionModal .form-group").fadeOut('slow', function() {
                    $("#suggestLoading").fadeIn('slow');
                    $("#suggestionSend").attr('disabled', true);
                });
                if ($("#suggest-email").val() != '' && $("#suggest-want-mail").prop('checked'))
                    email = $("#suggest-email").val();
                else
                    email = 'NULL';
                word = $("#suggest-word").val();
                pack = $("#suggest-pack").val();
                lang = $("#suggest-lang").val();
                var request = $.ajax({
                  url: "/ajax/suggestQuestion.php",
                  method: "POST",
                  data: {word: word, pack: pack, lang: lang, email: email}
                });

                $("#suggestQuestionModal .form-group").hide().children(':input').val('');
                $('#suggestQuestionModal .form-group > :checkbox').prop('checked', false);

                request.error(function(xhr,status,error) {
                $("#suggestLoading").fadeOut('slow', function() {
                  $("#suggestQuestionModal .modal-body div.alert").addClass('alert-danger').html("<?=$lg['suggest_error']?> <a class='"alert-link reset-suggestion'"><br><?=$lg['try_again']?></a>").fadeIn('slow');
                  setTimeout(function() {
                      $('#suggestQuestionModal').modal('hide');
                      }, 10000);
                  });
                }); 
                request.success(function(result, status, xhr) {
                    if (result == "OK") {
                    $("#suggestLoading").fadeOut('slow', function() {
                    $("#suggestQuestionModal .modal-body div.alert").addClass('alert-success').html("<?=$lg['suggest_success']?> <a class='"alert-link reset-suggestion'"><br><?=$lg['suggest_add_another']?></a>").fadeIn('slow');

                     });
                     }
                    else {
                    $("#suggestLoading").fadeOut('slow', function() {
                    $("#suggestQuestionModal .modal-body div.alert").addClass('alert-danger').html("<?=$lg['suggest_error_info']?> "+result+" <a class='"alert-link reset-suggestion'"><br><?=$lg['try_again']?></a>").fadeIn('slow');
                    });
                    }
                    });
                    $("#suggestQuestionModal .modal-body").on('click', '.reset-suggestion', function() {
                        resetSuggestionModal();
                    });

                }

            });

                showGroups();

            function showGroups() {
            $('#suggestQuestionModal .form-group > :input').on("change", function() {               
                if ($(this).parent().index() == currFormGroup) {
                if (currFormGroup < maxFormGroups) {
                    currFormGroup++;
                    $('#suggestQuestionModal .form-group:eq('+currFormGroup+')').fadeIn('slow');
                    if (currFormGroup == 4) {
                        $('#suggest-email').rules('add', {required: true, email: true});
                    }
                }

            }
            });
            }
            $('#suggestQuestionModal .form-group:eq(3) > :input').change(function() {
                    /*if ($(this).checked && $('#suggestQuestionModal .form-group:eq(4)').css('display') == 'none') {
                    alert("SHOW IT!");
                        $('#suggestQuestionModal .form-group:eq(4)').fadeIn('slow');
                        currFormGroup++;
                        alert(currFormGroup);
                    } */
                    if (!$(this).prop('checked') && $('#suggestQuestionModal .form-group:eq(4)').css('display') == 'block') {
                        $('#suggestQuestionModal .form-group:eq(4)').fadeOut('slow').children(':input').val('');
                        currFormGroup = currFormGroup - 1;
                        $('#suggest-email').rules('add', {required: false, email: false});
                    }
                    });
        //}

AFAIK（我试着用警报调试它）就在$（'#suggestionSend'）之前发生了不好的事情。单击右括号。

顺便说一句。是的，我知道代码真的是一团糟。

任何帮助-非常感谢。

您可以尝试使用Ajax而不是

request.done（函数（结果）｛

$（"#元素"）.fadeout（）；

})；

我不知道发生了什么。尝试了好几次，都没有成功。然后我决定尝试使用hide（）和show（），但仍然没有成功。在我把它改回fadeIn（）和fadeOut（）之后，它突然起作用了。一些严重的魔术正在进行…

编辑：我找到了。我忘了我把fadeIn函数移到了.form group fadeOut之外，所以从此：

$("#suggestQuestionModal .form-group").fadeOut('slow', function() {
      $("#suggestLoading").fadeIn('fast');
       $("#suggestionSend").attr('disabled', true); 
     });

我得到了这个：

$("#suggestQuestionModal .form-group").fadeOut('slow', function() {
       $("#suggestionSend").attr('disabled', true); 
     });
    $("#suggestLoading").fadeIn('fast');

以前，fadeIn函数被调用了4次（因为那些.form group元素）。

现在它工作得很好：）

相关文章：