jQuery圖像翻轉褪色

這可能被問了很多，我看到了一大堆不同的解決方案，其中一些我不能自己工作。jQuery圖像翻轉褪色

我的目標是建立一個菜單，但是，從一開始，最好先讓一個按鈕工作，是嗎？

於是，我就跟着Dragon Interactive教程

繼承人我的代碼：

CSS：

#navigation a { 
    position: relative; 
    } 

#navigation a .hover { 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 
    }

的Javascript：

<script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
$(".hover").css({'opacity':'0'}); 
$('#navigation li a').hover(function() { 

    // Stuff that happens when you hover on 
    $('.hover').animate({ 
     'opacity': 1 
     }, 700) 

},function() { 

    // Stuff that happens when you unhover 
    $('.hover').animate({ 
     'opacity': 0 
     }, 700) 

}); 
}); 


</script>

當然和HTML標記。

<p> 
Just some random giberish here, to make sure the positioning 
<br> 
works regardless of what junk I have before and after it. :) 
</p> 

<ul id="navigation" style="list-style-type: none; list-style-position:outside;"> 
<li> 
<a href="http://google.com"><img id="btn1" border="none" src="https://dom28edjsbv6i.cloudfront.net/Images/GetPlan.png" /> 
</a><span class="hover"><img src="https://dom28edjsbv6i.cloudfront.net/Images/GetPlan_MO.png" /></span> 
</li> 

</ul>

我試過改變不同的參數，我完全失去了。

我應該使用div，併爲背景圖片設置動畫效果嗎？這會產生相同的「img」鏈接效果，還是僅僅是錯誤的編碼？

基本上，我問的是一個可複製的最小解決方案。 :)

來源

2011-07-12 Jeff

有很多方法可以實現這種效果，例如pure CSS3 approach或您採用的JavaScript方法。如果你有特定的瀏覽器需求，那麼JavaScript方法可能是最好的選擇。

現有代碼中的問題是，動畫事件將持續觸發，而光標爲hovering。您應該查看mouseenter()和mouseleave() jQuery事件並停止（），以便快速進入和離開<a>不會排列大量淡入/淡出動畫。

您遇到的另一個問題是非懸停<img>和盤旋<img>彼此相鄰。這是一個更好的方法來保持HTML簡單和可用，沒有JavaScript懸停效果。因此，使用一個<img>標籤與非空洞的src並在JavaScript中操作src和不透明度來創建懸停效果。

編輯：這裏只是one way這樣做。它首先通過clone()工作<img>，這歸因於position:relative的組合<a>和position:absolute的<img>將該克隆直接置於原始頂部。然後生成克隆的不透明度。它依靠你的盤旋圖片總是以_MO結尾。這是做這件事的一種不顯眼的方式，因爲沒有JavaScript的用戶（他們仍然存在！）將具有乾淨的單個圖像HTML。

另一種方法是使用CSS sprites，但你仍然可以解決衰落問題。

有很多，將支持CSS3的方法，火狐4+，Chrome瀏覽器，Safari瀏覽器，歌劇，IE9瀏覽器。根據我的經驗，您的目標受衆通常會決定在這種發展中採取什麼方法。

編輯2：代碼澄清＆hellip;

$('#navigation li a img').each(function(index) { 
    $(this).clone().css({'opacity':0}).attr('src', $(this).attr('src').replace('.png','_MO.png')).appendTo($(this).parent()); 
});

＆hellip;首先克隆<img>元素，然後將不透明度設置爲0（隱藏），然後將該克隆的src屬性更改爲盤點版本的圖像，然後將克隆的DOM元素添加爲DOM中的<img> s父節點的子節點，即<a>。它利用jQuery chaining，但可以明確地寫爲：

$('#navigation li a img').each(function(index) { 
    var clonedImgElement = $(this).clone(); 
    var parentAnchorElement = $(this).parent(); 
    var originalSrc = $(this).attr('src'); 
    var hoveredSrc = originalSrc.replace('.png','_MO.png'); 
    clonedImgElement.css({'opacity':0}); // hide clone first 
    clonedImgElement.attr('src', hoveredSrc); // update the src to the hovered version 
    clonedImgElement.appendTo(parentAnchorElement); // attach clone to anchor in DOM 
});

編輯3：

你也可以將其替換懸停代碼：

$('#navigation li a').mouseenter(function() { 
    $(this).find('img').filter(':last').stop().animate({'opacity':1}); 

}).mouseleave(function() { 
    $(this).find('img').filter(':last').stop().animate({'opacity':0}); 
});

它根據:last報價更好的性能。

編輯4Updated demo與其他容器圖像的工作，現在只讓非懸停的圖像仍處於正常頁面流存在定位克隆，而不是所有圖像，並與圖像作品不是top:0;left:0

來源

2011-07-12 11:03:44 andyb

我認爲懸停是哈弗（IN，OUT）？我正在尋找一個JS方法，並不是很多瀏覽器都支持CSS3 AFAIK :) – Jeff

如何爲SRC更改設置動畫？這將是最好的解決方案！ – Jeff

我已經添加了一種方法的演示，克隆「」併爲克隆的不透明度設置動畫。 – andyb

您可以在兩個函數上調用相同的事件。每個都是懸停事件。也許你應該嘗試不同的事件，如鼠標懸停和鼠標或類似的東西？

來源

2011-07-12 11:01:31

看起來你是在正確的軌道上，但錯過了幾件事情：

hover跨度應該是a nchor標籤中：

<a href="http://google.com"> 
    <img id="btn1" border="none" 
     src="https://dom28edjsbv6i.cloudfront.net/Images/GetPlan.png" /> 
    <span class="hover"> 
     <img src="https://dom28edjsbv6i.cloudfront.net/Images/GetPlan_MO.png" /> 
    </span> 
</a>

hover跨度應權初始圖像的頂部定位：

#navigation a .hover { 
     display: block; 
     position: absolute; 
     top: -45px; 
     left: 0; 
     height: 100%; 
     width: 100%; 
     }

這裏是你的扭捏的解決方案：http://jsfiddle.net/W8KMe/3/

來源

2011-07-12 11:48:55 Tsar

jQuery圖像翻轉褪色

回答

相關問題