Скрыть значок загрузки через 3 секунды при переходе по ссылке <a

У меня есть значок загрузки в CSS, когда кто-то нажимает на ссылку, проблема в мобильной версии, у меня есть слайд-меню, которое открывается с помощью одного тега или ссылки, а значок CSS отображается и никогда не исчезает.

Мне нужно скрыть значок CSS через 3 секунды, это мой код.

$('a').click(function(){
     $('.loadingDiv').fadeIn('slow', function(){
               $('.loadingDiv').delay(3000).fadeOut(); 
            });
   $('<div class = "loadingDiv mobileShow"></div>').prependTo(document.body); 
});

.loadingDiv {
    position: fixed;
    left: 45%;
    top: 30%;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: .5;
    width: 40px;
  height: 40px;
  background-color: #333;

  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

Но не работает, любая помощь будет отличной, потому что

Что ж, этот фрагмент ничего не сделает, поскольку HTML не определен, а jQuery в него не включен.

— 19.03.2018 19:30

$ ('<div class = "loadingDiv mobileShow"> </div>') .prependTo (document.body);

— 19.03.2018 19:40

редактировать ваш вопрос с минимальным примером. См. минимальный воспроизводимый пример.

— 19.03.2018 19:41

javascript jquery css

19.03.2018 19:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не забывайте о setTimeout.

Вы можете просто:

setTimeout(function () {
  ... do the fading out here ...
}, 3000);

Я всегда предпочитаю решение vanila-js, а не jQuery. ;)

Ваше здоровье!

Спасибо, я решил проблему, это мой код в JS '<script type = "text / javascript"> $ (' a '). Click (function () {$ ('. LoadingDiv '). FadeIn (' slow ' , function () {$ ('. loadingDiv'). delay (2000) .fadeOut ();}); / * $ ('<div class = "loadingDiv mobileShow" id = "loadingDiv" style = "display: none; "> </div> ') .prependTo (document.body); * /}); </script> <div class = "loadingDiv" id = "loadingDiv" style = "display: none;"> </div> '

— 19.03.2018 20:11

19.03.2018 19:27