你如何添加一個淡入 - 淡出過渡到一個交換圖像

我發現了各種各樣的添加一個不錯的漸漸過渡到鼠標經過圖像的方式，但沒有真正說如何腳本應用到HTML文檔你如何添加一個淡入 - 淡出過渡到一個交換圖像

這是我到目前爲止..如何添加一個fadeIn，fadeOut腳本？而不是僅僅從圖像中彈出圖像

<img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" 
onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)" 
    onmouseout="MM_swapImgRestore()" />

下面是HTML文檔中的整個部分。

<td colspan="2" rowspan="5" align="left" valign="top"><a href="portfolio.html"><img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)" 
    onmouseout="MM_swapImgRestore()" /></a></td>

我怎麼隔離「指數alt_12.jpg」，併爲它創建一個ID標籤？我在哪裏可以放置該代碼？

來源

2013-03-30 user2227151

發佈您的JavaScript功能。 –

您是否使用jQuery？如果是這樣，那麼你有一個很好的解決方案！在你的HTML頁面的底部（下在那裏你包括jQuery的），你可以使用類似以下內容：

$(document).ready(function() { 
    $("#portfolio").mouseover(function() { 
    $("#img1").fadeTo(200, 1); 
    // The above means take 200ms to fade to an opacity of 1.0 (fully opaque). 
    $("#img2").fadeTo(200,0); 
    // The above says the same thing, but for fading out 
    }); 
});

如果你玩弄這一點了，你可以讓他們來回切換取決於這是顯示，但這是一般的想法。

瞧！我知道你正在尋找一個JavaScript的答案，但jQuery對這樣的東西非常有幫助，並會高度推薦給你。

來源

2013-03-30 13:37:57 exxodus7

非常感謝，這看起來有用，但是我需要安裝jQuery插件嗎？我不知道它是什麼 – user2227151

這是一個JavaScript庫。 http://jquery.com/ – thescientist

在嘗試使用硬編碼圖像執行此操作時存在一些錯誤，但您可以切換到CSS作爲解決方法。

首先，我會成立一個div並portfolio.jpg背景圖像：

HTML：

<div id="portfolio"></div>

的CSS：

#portfolio { 
    background:url('images/portfolio.jpg') no-repeat; 
    height: 150px; 
    width: 155px; 
}

這裏的褪色#portfolio方式在鼠標懸停時換掉，換入新的背景圖片，然後淡入div。需要jQuery 1.0+

$('#portfolio').mouseover(function() { 
    var self = $(this); 
    self 
     .fadeOut('slow', function() { 
      self 
       .css('background-image', 'url("images alt/index-alt_12.jpg")') 
       .fadeIn('slow'); 
     }); 
});

來源

2013-03-30 13:48:24 flemingslone

由於您使用的是鼠標懸停和外出，我假設您只有兩個圖像對嗎？

你可以做到這一點沒有JavaScript。它仍然可以在舊版瀏覽器中運行，但動畫淡入淡出只能在webkit，ie10和mozilla上運行。它只是一個問題，如果你必須在舊版IE瀏覽器上淡入淡出。

你可以做的是放置兩個圖像，一個在另一個之上。

例如 - 假設這是通過CSS

<img class="imageA" src="a.jpg" /> 
<img src="b.jpg" />

放置在另一個上面一個在CSS

.imageA { 
    -webkit-transition: all 300ms ease; 
    -moz-transition: all 300ms ease; 
    -o-transition: all 300ms ease; 
    transition: all 300ms ease; 
    opacity: 1; 
} 

.imageA:hover { 
    opacity: 0; 
}

您可以使用轉換從任何一個CSS屬性的另一個動畫以及。而不是兩個圖像，下面的圖像也可以是下面建議的容器的背景圖像，但仍然純粹通過CSS。

來源

2013-03-30 13:49:40

請注意，此解決方案在IE8中不起作用 - 因爲不透明屬性不完全受支持。 http://caniuse.com/css-opacity 此方法可以適應在IE8中工作 - 使用過濾器：alpha，但這會成爲整個其他問題。 – flemingslone

這只是導致圖像從淡入淡出。我使用Dreamweaver，「交換圖像」的行爲，我不知道如何分配一個ID標籤交換圖像，因爲它需要淡入淡出 – user2227151

你如何添加一個淡入 - 淡出過渡到一個交換圖像

回答

相關問題