基於div ID的切換圖像css

我有多個div，每個都有一個唯一的id和圖像。基於div ID的切換圖像css

我想改變/切換基於單擊的div的圖像CSS。點擊一次，它會改變不透明度。再次單擊並返回到原始狀態。

任何想法的方法將不勝感激。

<div class="card" id="card1"><img src="images/ten.gif" class="icon" /></div> 
<div class="card" id="card2"><img src="images/buf.gif" class="icon" /></div> 
<div class="card" id="card3"><img src="images/cle.gif" class="icon" /></div> 
<div class="card" id="card4"><img src="images/kc.gif" class="icon" /></div> 
<div class="card" id="card5"><img src="images/atl.gif" class="icon" /></div> 
<div class="card" id="card6"><img src="images/min.gif" class="icon" /></div> 
<div class="card" id="card7"><img src="images/nyg.gif" class="icon" /></div> 
<div class="card" id="card8"><img src="images/mia.gif" class="icon" /></div> 
<div class="card" id="card9"><img src="images/stl.gif" class="icon" /></div> 
<div class="card" id="card10"><img src="images/hou.gif" class="icon" /></div> 
<div class="card" id="card11"><img src="images/chi.gif" class="icon" /></div> 
<div class="card" id="card12"><img src="images/pit.gif" class="icon" /></div> 
<div class="card" id="card13"><img src="images/ind.gif" class="icon" /></div> 
<div class="card" id="card14"><img src="images/no.gif" class="icon" /></div>

...等

來源

2012-02-07 relyt

這純粹是給你的jQuery一個不錯的動畫效果，因此不需要額外的CSS ...

$(".card").toggle(function() { 
    $(this).find("img").animate({ opacity: 0.25 }); 
}, 
function() { 
    $(this).find("img").animate({ opacity: 1 }); 
});

它只是切換不透明度 - 0.25第一次點擊，1爲下一次點擊，0.25下次點擊等。

這裏的工作的例子...

http://jsfiddle.net/uHpqf/1/

來源

2012-02-07 16:41:24 Archer

阿切爾，謝謝。這幾乎就是我正在尋找的東西。唯一的問題是如果我爲包含的div創建動畫而不是圖像，那麼透明度會混淆我的邊界;它也變得透明。有沒有解決方法？ – relyt 2012-02-07 17:11:17

@relyt你去找夥伴 - 我修改了代碼和例子。如果你需要任何解釋只是大喊大叫。 – Archer 2012-02-07 17:15:55

運作良好。再次感謝 – relyt 2012-02-07 17:23:50

如果你使用如下代碼：

$(".card").click(function() { 
    $(this).find(".icon").toggleClass("transparent"); 
});

，那麼你可以定義有你想要的任何風格的CSS類.transparent。

來源

2012-02-07 16:37:19

不幸的是，.toggle只適用於有限的方式，但你可以使用三元運算符和一些jiggery pokery使它工作 - 如果你不能或不想創建一個新的CSS類，這是一個選項。如果你想動畫效果

$(document).ready(function(){ 
    $('.card').toggle(function(){ 
     $(this).children('icon').css('opacity','0.5'); 
    }, function(){ 
     $(this).children('icon').css('opacity','1'); 
    }); 
});

：

$('.card').click(function() 
{ 
    $('.icon', this).css('opacity', (parseFloat($('.icon', this).css('opacity')) == 0.5 ? 1 : 0.5)); 
}

來源

2012-02-07 16:39:42 Joe

jiggery pokery？哈，有趣。 – jondavidjohn 2012-02-07 16:40:30

試試這個

$(document).ready(function(){ 
    $('.card').toggle(function(){ 
     $(this).children('icon').animate({'opacity':0.5},500); 
    }, function(){ 
     $(this).children('icon').animate({'opacity':1},500); 
    }); 
});

來源

2012-02-07 16:40:15

基於div ID的切換圖像css

回答

相關問題