如何在不显示时隐藏gif图像的背景？答案

【问题标题】：how to hide the background of the gif image when it is not being displayed?如何在不显示时隐藏gif图像的背景？
【发布时间】：2014-05-21 22:36:27
【问题描述】：

我有一个简单的联系表格 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 图像，背景总是在 click 事件之前和 click 事件之后存在，因此提交按钮下方总是有一个不需要的空白。

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

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

【问题讨论】：

可以分享一下你的js代码吗？
我认为您的一个问题可能是由于图像“可见性：隐藏”的内联样式
是的，可见性：隐藏样式附加到 gif。基本上联系表格 7 是 wordpress 的一个插件，我试图改写他们的样式和默认情况下的 js。在这种情况下，我该如何覆盖它？

标签： jquery css wordpress

【解决方案1】：

"visibility:hidden" 将隐藏元素，但元素的块仍然可见，因为存在宽度和高度。 jQuery "show()" 函数使用 CSS "display" 属性，而不是 "visibility" 属性。

此 jQuery 代码将解决您的问题：

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

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

CSS：

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

JS：

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

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

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

【讨论】：

我必须将 !important 附加到 visibility:visible 以使其工作。
但隐藏时出现问题。我想在验证状态出现时隐藏它（它使用 display:block 显示）。我正在使用 $('.wpcf7-submit').click(function(){ $('.ajax-loader').show(); if('block' == $('div.wpcf7-display-无').css('display')){ $('.ajax-loader').show(); } });但不工作，因为 $('div.wpcf7-display-none').css('display') 正在输出 'none' ，我想在 wpcf7-display-none 的样式变成块后隐藏 ajax-loader
隐藏你可以使用的元素：$(".ajax-loader").hide();如果您依赖“可见性”属性，则可以使用： $(".ajax-loader").css("visibility","hidden");我再次建议使用“显示”而不是“可见性”。
我试过了，还是不行。我为那个问题发了另一个帖子。请看这个链接link

【解决方案2】：

在 ajax-loader 元素上，将样式从 visibility: hidden 更改为 display: none。为了显示元素，将样式设置为display: block。

如果visibility: hidden 设置在别处，只需为当前元素设置visibility: visible。

确保在隐藏微调器时使用 display: none（这应该是 $(".ajax-loader").hide() 的默认值。

【讨论】：