Javascript Jquery如何在背景上显示加载图标时使背景变灰

当用户单击submit按钮并在灰色背景上显示加载图标时，我尝试将背景灰显

下面是我试图显示的图标，但是我无法显示动画，图标只是静止不动

这是我的html：

 <div class="container"></div>
 <div id="loading-img" style=" z-index: 20;display:none;"></div>
 <button id="button">Submit</button>

我不知道如何准确地使用css使图标在灰色背景上动画化。有什么想法吗？？ 编辑：：：

小提琴：

---

谢谢

我重新编写了您在js fiddle中提供的示例：

步骤1： 我将您的

container

div重命名为

overlay

，因为从语义上讲，这个div不是一个容器，而是一个overlay。我还将loader div作为这个overlay div的子对象

生成的html为：

<div class="overlay">
    <div id="loading-img"></div>
</div>


<div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit. ...</div>
    <button id="button">Submit</button>
</div>

1） “容器”是一个类而不是一个ID 2） .container-设置z-index和display：在CSS中没有，也没有内联，除非有很好的理由这样做。演示@

CSS:

---

和一个。

注：制作gif动画没有什么神奇之处：它要么是动画gif，要么不是。如果gif不可见，则很可能是gif的路径错误，或者像您的情况一样，容器（div/p/etc）不够大，无法显示它。在代码示例中，未指定高度或宽度，这似乎是个问题

如果显示gif但未设置动画，请参见此答案底部的参考链接

但是，显示gif+覆盖比您想象的要容易

您只需要两个绝对位置div：一个覆盖div和一个包含加载gif的div。两者的z索引都比页面内容高，图像的z索引也比覆盖层高，因此它们在可见时将显示在页面上方。

因此，当按下按钮时，只需取消隐藏这两个div。就这样

$（“#按钮”）。单击（函数（）{
$（'#myOverlay'）.show（）；
$（'#loadingGIF'）.show（）；
setTimeout（函数（）{
$（'myOverlay，#loadingGIF'）.fadeOut（）；
},2500);
});
/*或者，在单击“背景”时删除覆盖/图像*/
$（'#myOverlay'）。单击（函数（）{
$（'myOverlay，#loadingGIF'）.fadeOut（）；
});
body{font-family:Calibri、Helvetica、sans-serif；}
#myOverlay{位置：绝对；顶部：0；左侧：0；高度：100%；宽度：100%；}
#myOverlay{显示：无；背景过滤器：模糊（4px）；背景：黑色；不透明度：.4；z索引：2；}
#加载GIF{位置：绝对；顶部：10%；左侧：35%；z索引：3；显示：无；}
按钮{边距：5px 30px；填充：10px 20px；}

有一次，在一个沉闷的午夜，当我疲惫不堪地思考着许多稀奇古怪的被遗忘的密码时。。。当我点点头，几乎要打盹的时候，突然传来了敲门声。。。就像有人轻轻地敲我办公室的门一样“是队长，”我咕哝着，敲着办公室的门——只有这个，没有别的。啊，我清楚地记得那是在阴冷的十二月，每个单独的印刷品都在地板上皱巴巴地躺着。我热切地祝愿明天；我徒劳地想从悲伤中借用Stack-O Surstope——悲伤是我日常生活的核心。我的天使们似乎忽视了那些辉煌但不起作用的代码。我将调整代码。。。永远
提交
单击后，您是否看到元素
div#loading img
的显示属性从值
none
切换到
block
？您的加载程序是动画gif还是css动画？是否正常工作？确保加载img的DIV足够大，可以容纳图像。那可能是你的问题。还有，更简单的代码，请看我的答案。@gibberish：是的，我让它工作了！！非常感谢你的帮助！！！谢谢大家的帮助，我成功了！！！很高兴听到这个消息——祝你的项目顺利
<div class="overlay">
    <div id="loading-img"></div>
</div>


<div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit. ...</div>
    <button id="button">Submit</button>
</div>

.overlay {
    background: #e9e9e9;  <- I left your 'gray' background
    display: none;        <- Not displayed by default
    position: absolute;   <- This and the following properties will
    top: 0;                  make the overlay, the element will expand
    right: 0;                so as to cover the whole body of the page
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

$("#button").click(function () {
    $(".overlay").show();
});

$("#button").click(function() {
    $(".container").css("opacity", 0.2);
   $("#loading-img").css({"display": "block"});
});

#loading-img {
    background: url(http://web.bogdanteodoru.com/wp-content/uploads/2012/01/bouncy-css3-loading-animation.jpg) center center no-repeat;  /* different for testing purposes */
    display: none;
    height: 100px; /* for testing purposes */
    z-index: 12;
}