Блог

Привет, ребята!

У меня небольшая проблема на моей недавно созданной домашней странице. Я попытался исчезнуть в HTML div с классом «content», и он отправил оба сообщения журнала в консоль, но он все еще не исчезает!

Я, конечно, удалил всю ненужную информацию из этих фрагментов кода

Вот мой HTML

 <div class="content">  </div>
  

И мой CSS

 .content{
margin: 0px;
position: fixed;
display:none
background-image: url("../img/city_topdown_blurred.png");
background-size:cover;
width: 100%;
height: 100%;
}
  

и, наконец, мой jquery

 $(document).ready(function(){
  console.log("fading in");
  $('.content').fadeIn("slow", function(){
    console.log("fading done");
  });
});
  

Оба сообщения журнала мгновенно отправляются в мой браузер (Chrome)
даже если время установлено на 10000 или выше.

Вам не хватает ; после display: none добавления, которое, похоже, исправляет это, вот рабочий пример:https://jsfiddle.net/nbekm981/1

Причина, по которой отсутствующий ; сломал его, заключалась в том, что он устанавливал display: none background-image: url("../img/city_topdown_blurred.png"); недопустимый параметр. Поскольку оно было недействительным, оно использовалось по умолчанию display: block; (которое отображается автоматически). Таким образом, ваше затухание уже было завершено до того, как оно каким-то образом началось.

У вас отсутствует точка с запятой после display:none;

Кроме того, загрузка изображения (для фона) может занять некоторое время, поэтому вы можете предварительно загрузить изображение, прежде чем оно исчезнет.

Смотрите демонстрационную версию ниже:

 $(document).ready(function() {
  // pre-load the image
  $('<img/>').attr('src', 'http://lorempixel.com/1024/1024').load(function() {
    console.log("image done loading");
    // prevent memory leaks
    $(this).remove();

    // assign image to .content 
    $('.content').css('background-image', 'url(http://lorempixel.com/1024/1024)');

    console.log("fading in starts");
    // fade in 
    $('.content').fadeIn(2000, function() {
      console.log("fading done");
    });
  });
});  

 .content {
  margin: 0;
  position: fixed;
  display: none;
  /*background-image: url("http://lorempixel.com/1024/1024");
    background-color: green;*/
  background-size: cover;
  width: 100%;
  height: 100%;
}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
</div>  

Из документации jQuery

Метод .fadeIn() анимирует непрозрачность сопоставляемых элементов. Это похоже на метод .fadeTo(), но этот метод не отображает элемент и может указывать конечный уровень непрозрачности.

Я не верю, что он будет анимироваться с display: none , но с opacity: 0 .