CSS轉換不會緩解

Question

對此有很多問題，但他們都不能幫助我。

我試圖緩和進出基於按鈕盤旋的背景圖像。 Here is the fiddle

HTML: 
<div class="bg bg-home"></div> 
<div class="main-menu" id="home"> 
    <a href="#">Home</a> 
</div> 

JS: 
$('#home').hover(function() { 
    $('.bg.bg-home').addClass('home-main-menu'); 
},function() { 
    $('.bg.bg-home').removeClass('home-main-menu'); 
}); 

CSS: 
html,body { 
    height: 100%; 
} 
.bg { 
    -webkit-transition: all 1s; 
    transition: all 1s; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    opacity: 0; 
} 
.bg-home { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
} 
.home-main-menu { 
    background: url("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/1/11/1357921737290/Masterclass-in-HTML5-and--006.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    opacity: 1; 
} 

的問題是，背景圖像精細減輕，但不緩出。我也試圖只做不透明的過渡，但結果相同。

有人可以解釋我做錯了什麼嗎？

預先感謝您。

Answer 1

您可以將背景圖像切換到.bg-home本身。然後，懸停時添加的課程只需要影響不透明度，您就可以順利進行緩解。

看到這個小提琴： https://jsfiddle.net/Ltv58jmh/2/

.bg-home { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
    background: url("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/1/11/1357921737290/Masterclass-in-HTML5-and--006.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    opacity:0; 
} 
.home-main-menu { 
    opacity: 1; 
}