Выцветание на фоне тела

Я действительно понятия не имею о JS, но мне нужно будет иметь эффект fadeIn на моих случайных фоновых изображениях тела. Может кто-нибудь указать мне в правильном направлении, пожалуйста.

<script type="text/javascript"> 
var totalCount = 5;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpg';
document.body.style.backgroundSize = "cover";
document.body.style.backgroundPosition = "center";
}
</script>

Спасибо

Источник

2 ответа

Решение
<!DOCTYPE html>
<html>
<header>
<script>
$(document).ready(function(){
    $("#image").hide();
    $("#clickIt").click(function(){
        function ChangeIt(){
          var totalCount = 5;
          var num = Math.ceil( Math.random(2) * totalCount );
            return num;
        }
        var speed = ChangeIt();
        $("#Body img").fadeIn(speed, linear);

    });
});
</script>
</header>
<body id="Body">
  <img id="#image" src="../apple.png" alt="img">
  <button id="clickIt"/> go </button>
</body>
</html>

Просто чтобы указать вам правильное направление, вы можете сделать fadeIn и fadeOut, используя jquery. Выше приведен пример того, как это может выглядеть, я уверен, что это будет отличаться для ваших нужд, но посмотрите документацию по fadein на веб-сайте jquery. Jquery fadein api

Источник

После нескольких разочаровывающих часов исследований, оно, наконец, сводилось к следующему:
<body>не может иметь фоновое изображение, которое является прозрачным, поэтому оно не может исчезать либо. Решением моей проблемы было подделать его с помощью белого полноэкранного div. Я добавил простую CSS-анимацию, уменьшив прозрачность с 1,0 до 0,0.

Источник
Другие вопросы по тегам