項目隨淡入/淡出（jQuery）

我想在我的網頁中創建一個菜單，其中每個列表項都由圖像表示。當鼠標指向這些圖像中的某些圖像時，該圖像應該淡出並被另一個圖像替換（我認爲fadeIn（）會很有用）。項目隨淡入/淡出（jQuery）

HTML代碼：

<ul id="buttons">`  
    <li><a href="#" onmouseover="change(1)" onmouseout="ret(1)"> 
     <img src="button01.png" id="button01_1" /> 
     <img src="button01_hover.png" id="button01_2"/> 
    </a></li> 
    <li><a href="#" onmouseover="change(2)" onmouseout="ret(2)"> 
     <img src="button02.png" id="button02_1" /> 
     <img src="button02_hover.png" id="button02_2"/> 
    </a></li> 
</ul>

jQuery的 - 我的新的使用jQuery，我想這一點，但也有許多錯誤。圖片無法正常更改 - 「淡入」圖片更改位置（每個列表項絕對定位），並且第一個圖像正在消失並不斷出現。 Here's代碼：

function change(i) 
{ 
    switch(i) 
    { 
     case 1: 
      $("#button01_1").fadeOut(500); 
      $("#button01_2").fadeIn(500); 
      break; 
     case 2: 
      $("#button02_1").fadeOut(500); 
      $("#button02_2").fadeIn(500); 
    } 
}

（RET（i）是類似的。）

感謝您的幫助..

來源

2012-11-24 Tom11

以供將來參考，只需輸入所有的代碼原樣，然後選擇所有的它，然後單擊該按鈕看起來像這樣：'{}' –

（並且，如果您有時間，請查看[標記幫助頁]（http://stackoverflow.com/editing-help/）以獲取進一步參考/指導。） –

謝謝，我一定會讀它 – Tom11

你就要成功了，但我可以簡化：

<ul id="buttons"> 
    <li> 
     <a href="#" id="link1"> 
      <img src="button01.png" id="button01_1" /> 
     </a> 
    </li> 
    <li> 
     <a href="#" id="link2"> 
      <img src="button02.png" id="button02_1" /> 
     </a> 
    </li> 
</ul>

jQuery代碼：

$('#link1').hover(function(){ 
    $('#button01_1').fadeOut(500).attr('src','button01_hover.png').fadeIn(500); 
},function(){ 
    $('#button01_1').fadeOut(500).attr('src','button01.png').fadeIn(500); 
});

有了選擇，你可以刪除ID button01_1和jQuery選擇更換到$('img','#link')適應。對不起，如果我使用了太多的jQuery庫比JavaScript。

功能解釋：

$（ '＃鏈接1'）懸停（函數（）{上hover-- --initial功能}，函數（）{--coming出hover--的}） ;

編輯：

jQuery庫：<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

庫添加到您的html頁面

來源

2012-11-24 21:29:24 sourRaspberri

這是完整的.js文件嗎？它不工作..列表項不響應鼠標懸停 – Tom11

你有沒有改變的HTML？我刪除了第二個，並將屬性'id =「link1」'添加到錨點。另外我刪除了其他JavaScript相關的屬性。 – sourRaspberri

如果我更新了jsfiddle，您是否能夠看到我所做的更改？ – sourRaspberri

我認爲這個問題是一個事實，即淡出的圖像也觸發一個mouseout，（因爲一旦淡出完成，它有display:none），這反過來觸發淡入，等等。考慮重新思考你的邏輯。

來源

2012-11-24 21:23:38

-1在問題 – sbaaaang

@Ispuk中沒有點擊請求你是對的，我的意思是說，鼠標懸停，但我意識到，這不是問題。 –

+1你開了一個好話題;），對不起我的英語 – sbaaaang

更新時間：
使用這樣的：

<ul id="buttons">  
    <li><a href="#" onmouseover="change($(this),1)" onmouseout="ret($(this),1)"> 
     <img src="button01.png"/> 
    </a></li> 
    <li><a href="#" onmouseover="change($(this),2)" onmouseout="ret($(this),2)"> 
     <img src="button02.png"/> 
    </a></li> 
</ul>

的jQuery：

function change(elem ,i){ 
    $(elem).find('img').fadeOut('500',function(){ 
     $(this).attr('src','button0'+i+'_hover.png').fadeIn('2000'); 
    }); 
} 
function ret(elem ,i){ 
    $(elem).find('img').fadeOut('500',function(){ 
     $(this).attr('src','button0'+i+'.png').fadeIn('2000'); 
    }); 
}

我希望工作...

來源

2012-11-24 21:26:51

這就是我想要創建的東西。但問題是，hide（）函數會導致第一個圖像立即消失，所以一會兒就會出現間隙（沒有圖像）。我需要流暢的淡入淡出。我嘗試在你的代碼中使用fadeOut（500）而不是hide（），但它會導致圖像行爲出現混亂。 – Tom11

好的我更新了答案... –

項目隨淡入/淡出（jQuery）

回答

相關問題