平穩的背景圖像轉換 - 的Javascript

Question

http://www.chooseyourtelescope.com/（>>請觀看最少15「」屏幕上，該網站是不完全應答還和你不會明白我說的）

當你在徘徊按鈕（月亮，星球等）它改變了背景。但是Chrome上的轉換很麻煩（image0> blank> image1）。並且工作在IE11上，但有時會出現滯後。我沒有嘗試過其他瀏覽器。

如何平滑過渡？ 快速褪色Image0> image1，而不是image0>過渡顏色> image1

以下是MOON按鈕的代碼。這與其他人一樣。 （我不知道關於JavaScript什麼。我發現下面的＃2的腳本。）

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' 
]; 

在這一步之後，您需要添加新的attiribute按鈕，如data-id。

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

當你定義的所有的變量，你需要檢測懸停與您現有的代碼，並選擇合適的形象，是在IMGS陣列作爲背景。

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