Jquery - 如何在显示加载图标的同时使背景变灰

Question

当用户点击提交按钮并在灰色背景上显示加载图标时,我试图使背景变灰.

下面是我试图展示的图标,但是我无法显示动画,图标只是保持不动.

这是我的HTML:

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

JS:

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

我不确定如何使用css在灰色背景上制作动画图标.有什么想法吗？编辑::::

小提琴:http://jsfiddle.net/hnk6bLbt/1/

谢谢!

Answer 1

我重写了你在js小提琴中提供的例子:http://jsfiddle.net/zravs3hp/

步骤1 :

我将你的containerdiv 重命名为overlay,在语义上这个div不是一个容器,而是一个叠加层.我还将装载器div放置为此叠加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>

叠加的css如下

.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;
}

第2步 :

我添加了一些虚拟文本,以便覆盖一些东西.

第3步:

然后,在click处理程序中我们只需要显示叠加层:

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

Answer 2

注意：要回答您的特定问题，对gif进行动画处理没有任何魔术效果：它可以是动画gif，也可以不是。如果未显示gif，则很可能是gif的路径错误。如果gif存在但没有动画，请参阅此答案底部的参考链接。

但是，显示gif +叠加层比您想象的要容易。

您只需要两个绝对位置的DIV：一个覆盖div和一个包含加载gif的div。两者的z-index都比您的页面内容高，因此它们在可见时会覆盖页面。

按下按钮时，取消隐藏这两个div。而已！

jsFiddle演示

HTML：

<div id="myOverlay"></div>
<div id="loadingGIF"><img src="http://placekitten.com/50/49" /></div>
<button id="button">Submit</button>

javascript / jQuery：

$("#button").click(function() {
    $('#myOverlay').show();
    $('#loadingGIF').show();
    setTimeout(function(){
        $('#myOverlay').hide();
        $('#loadingGIF').hide();
    },3000);
});

CSS：

#myOverlay{position:absolute;height:100%;width:100%;}
#myOverlay{background:black;opacity:.7;z-index:2;display:none;}
#loadingGIF{position:absolute;top:40%;left:45%;z-index:3;display:none;}

参考文献：

http://www.paulirish.com/2007/animated-gif-not-animating/

加载页面时的GIF动画没有动画

https://wordpress.org/support/topic/animated-gif-not-working

http://forums.mozillazine.org/viewtopic.php?p=987829