JQuery: как вычеркнуть фон, показывая значок загрузки над ним

Я пытаюсь вычеркнуть фон, когда пользователь нажимает кнопку "Отправить" и показывает значок загрузки по зеленому фону.

ниже показан значок im, который пытается показать, однако я не могу показать анимацию, значок просто остается неподвижным.

Вот мой 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::

Fiddle: http://jsfiddle.net/hnk6bLbt/1/

Спасибо!

Ответ 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();
});

Ответ 2

Примечание. Чтобы ответить на ваш конкретный вопрос, нет анимации для анимации gif: это либо анимированный gif, либо нет. Если gif не появляется, очень вероятно, что путь к gif ошибочен. Если gif присутствует, но не оживляет, см. Ссылки ссылки на самом дне ответа.

Отображение gif + overlay, однако, проще, чем вы думаете.

Все, что вам нужно, это два DIV с абсолютной позицией: оверлейный div и div, содержащий ваш загрузочный gif. Оба имеют более высокий индекс z, чем ваш контент страницы, поэтому они будут накладываться на страницу , если она видна.

При нажатии кнопки отобразите эти два 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/

Анимированный GIF во время загрузки страницы не анимируется

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

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

Ответ 3

1) "container" - это класс, а не идентификатор 2).container - установить z-index и display: none в вашем CSS, а не в строке, если нет веских оснований для этого. Демо @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;
}

И демо с анимированным изображением.