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在灰色背景上制作动画图标。有什么想法吗？ EDIT ::::

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

谢谢！

Answer 1

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

第1步：

我将container div重命名为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 Demo

<强> 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/

Animated GIF while loading page does not animate

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

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

Answer 3

1）＆＃34;容器＆＃34;是一个类而不是ID 2）.container - 在你的CSS中设置z-index和display：none而不是内联，除非有充分的理由这样做。演示@ fiddle

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

CSS：

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

和demo with animated image。