用JQuery切換不透明度

我一直在研究這個類似畫廊的菜單，我幾乎有一個有序列表和15個圖像。除第一個圖像外，圖像全部爲opacity: 0。當我點擊第一張圖片時，其他圖片應該會淡入opacity: 1。用JQuery切換不透明度

這裏是我的html：

<ol id="gallery"> 
    <li><img id="first_img" src="http://www.astro-galaxy.com/screens/ss1_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss2_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss3_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss4_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss5_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss6_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss7_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss8_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss9_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss10_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss11_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss12_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss13_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss14_tmb.jpg"></li> 
    <li><img src="http://www.astro-galaxy.com/screens/ss15_tmb.jpg"></li> 
</ol>

在這裏，我的JQuery：

$(document).ready(function() { 
    $("first-img").click(function() { 
    $("#gallery img").animate({"opacity": "toggle"}); 
    }); 
});

我一直小時在看帖子看的解決方案，沒有運氣，請大家幫忙。

來源

2014-12-22 julian.a.avar

如果您告訴我們您目前看到的是什麼行爲，而不僅僅是您想要的行爲，那麼您更有可能獲得幫助。 –

糾正你的jQuery選擇，而不是'第一img'它應該是'＃第一img' –

當我完成糾正一切，我點擊了圖像時，圖像disapeared，而不是他們的休息apearing。但是我得到了我在尋找的東西@JRulle找到了解決方案，我仍然在遊蕩，我是否可以讓它們依次排列，如第一個，第二個，等等，直到最後一個。當我再次點擊時，效果會反轉？ –

你需要調整你的JavaScript來處理if語句中的切換。此外，您的第一圖像選擇器應該是#first_image以匹配您的HTML中的id。 JSfiddle demo

$(document).ready(function() { 
    $("#first_img").click(function() { 
    if($("#gallery img").not("#first_img").css("opacity") == 0) { 
     $("#gallery img").not("#first_img").animate({opacity: "1"},1000); 
    } else { 
     $("#gallery img").not("#first_img").animate({opacity: "0"},1000); 
    } 
    }); 
});

來源

2014-12-22 04:31:42 JRulle

我不知道你爲什麼要這樣做。這裏不需要if語句 – jmore009

好吧，這是一個複雜的代碼和一切，但是你的代碼完美工作，我只有一個問題，有沒有辦法讓它們按順序排列？或者我要爲每個'li'元素添加一個單獨的ID？謝謝！ –

你的意思是順序出現？（即一個接一個） – JRulle

你的標識符是錯誤的，它應該是：

$("#first_img").click(function() {

，而不是

$("first-img")

這並不識別id或我們的_，您只需設置opacity 1而不是toggle除非你想讓它們淡入淡出

你可以使用簡單的CSS設置頁面加載時的不透明度而不是試圖用JS選擇這樣做：

CSS：

img{ 
    opacity: 0; 
} 

#first_img{ 
    opacity: 1; 
}

$("#first_img").click(function() { 
    $("#gallery img").animate({"opacity": "1"}); 
});

FIDDLE

來源

2014-12-22 04:20:41 jmore009

謝謝，我沒有注意到，但是在我嘗試之後，它仍然不起作用... –

@ user284098您必須添加它錯誤，也許您沒有將它包裝在'$（document）中。就緒「功能，正如你從我的小提琴中看到的那樣，它工作得很好。 – jmore009

是的，他們改變爲「不透明：1」，但它不切換，這是我試圖搜索。 –

，如果你有一個類，降低了透明度可能更容易。這樣，你可以使用toggleClass方法，例如：

$("first-img").click(function() { 
    $("#gallery img).toggleClass("toggledImg"); 
}

自定義類然後添加到您的CSS：

.toggledImg { 
    opacity: 0 
}

來源

2014-12-22 04:23:37

$(document).ready(function() { 
    $("first-img").click(function() { 
$("#gallery img").animate({opacity:"1"}); 
}); 
});

之前，你應該添加CSS：

#gallery img{ opacity:0}

來源

2014-12-22 04:24:25

用JQuery切換不透明度

回答

相關問題