jquery - gif图片不显示时如何隐藏背景？

Question

我有一个简单的联系表 7，通过 css 几乎没有外观变化。表单代码如下:

<form action="/medical/#wpcf7-f13-o1" method="post" id="index-appointment-form" class="wpcf7-form col-md-7 col-lg-6 invalid" novalidate="novalidate">
    <div style="display: none;">
        <input type="hidden" name="_wpcf7" value="13">
        <input type="hidden" name="_wpcf7_version" value="3.8.1">
        <input type="hidden" name="_wpcf7_locale" value="en_US">
        <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f13-o1">
        <input type="hidden" name="_wpnonce" value="d4ff0cd447">
    </div>

    /*here are codes for input elements*/

    //and below is the code for submit button and gif image and validation status 

    <p>
        <input type="submit" value="Make an appointment now" class="wpcf7-form-control wpcf7-submit btn btn-block btn-default">
        <img class="ajax-loader" src="http://localhost/medical/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;">
    </p>
    <div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block;" role="alert">
        Validation errors occurred. Please confirm the fields and submit it again.
    </div>
</form>

工作流程是，如果我点击提交按钮，gif 图像显示在提交按钮的底部(在 img 标签中显示宽度和高度属性为 16px、16px)，直到显示验证状态消息。当状态消息出现时，gif 图像消失。

问题是即使没有显示 gif 图片，背景总是在点击事件之前和之后，所以提交按钮下方总是有一个不需要的空白。

我尝试使用 .ajax-loader{display:none;} ，但是当我点击按钮时背景和图像都没有显示。即使我在 jquery 中尝试了 .show()，也没有任何显示。

基本上我希望在没有图像时 gif 加载器图像不会产生不需要的间隙。有什么解决办法吗？

Answer 1

"visibility:hidden"将隐藏元素，但元素的 block 仍然可见，因为有宽度和高度。jQuery“show()”函数使用 CSS“显示”属性，而不是“可见性”属性。

这段 jQuery 代码将解决您的问题:

$(".ajax-loader").css("visibility", "visible");

最好的解决方案是仅依赖“显示”属性:

CSS:

.ajax-loader {display:none; visibility:visible;}

JS:

$(".ajax-loader").show();

需要添加用户点击按钮时的JS代码。

另一方面，“可见性”CSS 属性在您的情况下并不是很有用。如果你愿意，你可以摆脱它。