Гладких фоновых изображений - Javascript

Question

http://www.chooseyourtelescope.com/ (>> Пожалуйста, посмотрите его на минимум 15 «» экран, сайт не полностью реагирует еще и вы не видите, что я говорю)

При наведении Кнопки (луна, планета и т. д.) меняют фон. Но переход Chrome на Chrome (image0> blank> image1). И работайте на IE11, но иногда с задержкой. Я не пытался с другими браузерами.

Как сделать плавный переход? Quick fade Image0> image1, not image0> цвет перехода> image1

Вот код кнопки MOON. То же самое с остальными. (я ничего не знаю, Javascript. Я нашел ниже сценарий на Stackoverflow.)

HTML

<div class="top-logos-home" id="top-logos-moon-front"><img src="moon-logo.png" alt="MOON"></div> 

CSS

.image-home { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-image: url(Frontpage.jpg); 
    background-size: cover; 
    display:inline; 
    top:0; 
} 

JAVASCRIPT

jQuery(function(){ 
    var $body = $('.image-home'); 
    $('#top-logos-moon-front').hover(function(){ 
     $body.css('background-image', 'url("Frontpage-moon.jpg")') 
    }, function() { 
     $body.css('background-image', '') 
    }) 
}) 

Answer 1

Я нашел решение, используя непрозрачности свойство. Теперь он работает отлично.

HTML

<img id="background-moon-front" class="hover-backgrounds" src="Frontpage-moon.jpg" /> 

CSS

.hover-backgrounds { 
    opacity:0; 
    transition: opacity 0.6s linear; 
    top:0; 
    position:absolute; 
    background-size: 100%; 
} 

JavaScript

$(document).ready(function (e) { 
    $("#top-logos-lune-front").hover(function (e) { 
    $("#background-moon-front").css("opacity", "1"); 
    }, function() { 
     $("#background-moon-front").css("opacity", "0") 
    }) 
}); 

Answer 2

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

jQuery(function(){ 
    var $body = $('.image-home'); 
    $('#top-logos-moon-front').hover(function(){ 
     $body.fadeOut('slow',function(){ 
      $body.css('background-image', 'url("Frontpage-moon.jpg")').fadeIn('slow'); 
     }); 
    }, function() { 
     $body.css('background-image', '') 
    }) 
}) 

---

Если вы хотите, чтобы сделать лучшее решение для этого вам необходимо следовать инструкциям ниже.

Во-первых, вам нужно определить свой путь изображений в js с помощью кода ниже.

var imgs = [ 
    'http://i.imgur.com/DwLjYhh.jpg', 
    'http://i.imgur.com/gAlqfUU.jpg' 
]; 

После этого шага вам необходимо добавить новые атрибуты ваших кнопок, такие как идентификатор данных.

<div class="top-logos-home" id="top-logos-moon-front" data-id='0'> 
    <img src="button_image_jpg" alt="MOON"> 
</div> 

Когда вы определили все переменные, вы должны обнаружить парение с текущим кодом и выбрать правильное изображение, которое находится в ГИМ массива для фона.

jQuery(function(){ 
    var $body = $('.image-home'); 
    $('#top-logos-moon-front').hover(function(){ 
    $body.fadeOut('slow',function(){ 
     //fade out slowly element and after change the style of inner elements then fade in slowly. 
     $body.css('background-image','url('+imgs[$(this).attr('data-id')]+')').fadeIn('slow'); 
    }); 
    }); 
}); 

По моему личному мнению; Переходы между изображениями не должны управляться таким образом. Создайте другой элемент для каждой планеты. Когда пользователь нажимает кнопку, планет скользит и перекрывается. Вы можете увидеть демо в приведенном ниже коде.

http://codepen.io/thegeek/pen/GDwCa