如何使用jQuery和CSS創建圖像懸停淡入淡出效果？

我試圖通過淡入淡出兩個圖像來創建徽標懸停效果。我嘗試過使用CSS，但結果看起來並不像預期的那麼好（儘管它完全適用於其他目的），所以我決定嘗試jQuery。（忽略標籤，他們是博主）。如何使用jQuery和CSS創建圖像懸停淡入淡出效果？

這是我的第一個方法（在淡入淡出時看起來不錯，但'display：none'在第一次懸停時不能正確顯示'display：block'，因此圖像從初始位置移動然後它可以追溯到那個位置徘徊時，它完美的作品。

<script type='text/javascript'> 
//<![CDATA[ 
$(function() { 
$('#MyLogoContainer').hover(function() { 
    $('#MyLogoHover').fadeIn('slow'); 
    $('#MyLogo').fadeOut('slow'); 
}, function() { 
    $('#MyLogo').fadeIn('slow'); 
    $('#MyLogoHover').fadeOut('slow'); 
}); 
}); 
//]]> 
</script>

我的第二個辦法解決的CSS位置問題，但動畫看起來並不流體都和兩個圖像在某些時候消失幾乎完全，這看起來不太好，也沒有用我的拳頭髮生。

<script type='text/javascript'> 
//<![CDATA[ 
$(function() { 
$('#MyLogoContainer').hover(function() { 
    $('#MyLogoHover').fadeIn('slow').css('display','block'); 
    $('#MyLogo').fadeOut('slow').css('display','none'); 
}, function() { 
    $('#MyLogo').fadeIn('slow').css('display','block'); 
    $('#MyLogoHover').fadeOut('slow').css('display','none'); 
}); 
}); 
//]]> 
</script>

問題出現在CSS中。不知何故，我必須找到一種方法，以便顯示屬性在定位這兩個SVG圖像中不發揮關鍵作用，所以我可以使用第一個jQuery代碼，而不會對我的SVG圖像的位置發生任何更改。

#MyLogoContainer { 
    width: 100%; 
    left: 50%; 
    margin: 0 0 0 -350px; 
    position: absolute; 
} 
#MyLogo { 
    width: 700px; 
    display: block; 
    position: absolute; 
} 

#MyLogoHover { 
    width: 700px; 
    display: none; 
    position: absolute; 
}

來源

2016-05-02 Adriana Cota

，jQuery將讓這個容易得多。否則，您可以通過更改要淡入的元素的類來使用css轉換。我們需要看到更多的代碼才能夠提供幫助。 HTML的外觀如何？ –

要將一幅圖像淡入另一幅圖像，兩幅圖像必須在淡入淡出的同時顯示。創建兩個圖像，一個在另一個之上。當頂部的一個消失時，將CSS'opacity'設置爲0，使用CSS'transition'。 – Aloso

https://jsfiddle.net/ahmadabdul3/mvw9xm89/1/ < - 一對夫婦的例子 –

從你描述你甚至不需要JS做到這一點：

.container { 
 
    position: relative; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
    background: #ccc; 
 
    height: 150px; 
 
    width: 150px; 
 
} 
 

 
.container:hover .logo--static-state { 
 
    opacity: 0; 
 
} 
 

 
.container:hover .logo--hover-state { 
 
    opacity: 1; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    transition: opacity 300ms ease-in-out; 
 
} 
 

 
.logo--static-state { 
 
    z-index: 9999; 
 
} 
 

 
.logo--hover-state { 
 
    opacity: 0; 
 
    z-index: 9998; 
 
}

<div class="container"> 
 
    <img class="logo logo--static-state" src="http://placehold.it/150x150?text=Static" height=150 width=150> 
 
    <img class="logo logo--hover-state" src="http://placehold.it/150x150?text=Hovered" height=150 width=150> 
 
</div>

如果你想要一個JavaScript方式

來源

2016-05-02 19:40:20

它的工作原理，但問題是這兩個圖像都是透明的SVG，並且在懸停前靜態圖像下邊框可見。有沒有辦法在懸停圖像上設置0不透明度，並將鼠標懸停在靜態圖像上時將其設置爲1（就像減少該圖像的不透明度一樣，我想我有辦法做到這一點，將鼠標懸停在容器上，我試試 –

根據你的評論做出了改變讓我知道這是否可行 –

謝謝你的更新我試圖做一個徽標懸停效果在更新你的答案之前，我用jQuery試了一下，得到了一個類似的問題。我的CSS代碼有問題，因爲'display：none';不會變成'display：block';當我淡入第一次懸停圖像..如果我添加.css（'顯示'，'塊'）它只是簡單地消失就像你的代碼，這看起來不像預期的。我會用我的CSS和jQuery更新我的問題。如果你更新你的答案，我認爲你不應該刪除你已發佈的內容，它肯定會對某人有用。 –

如何使用jQuery和CSS創建圖像懸停淡入淡出效果？

回答

相關問題