如何編寫簡單的點擊不透明度淡入？

好的，所以我只是試圖使不透明度從0降低到1，然後在點擊時從1降低到0。我假設我需要寫一個if語句。這是現在的代碼。如何編寫簡單的點擊不透明度淡入？

$(document).ready(function() { 
    $('#soilink').click(function() {$('#soi').animate({opacity:1}, 400);} 

    );

所以現在，如果我點擊我的網站的鏈接，被稱爲#soi股利區域淡入，但第二部分是，我需要能夠點擊該鏈接再次所以淡化爲0.還沒有弄清楚那部分。

編輯

我想這個切換，但是使用切換功能將導致DIV完全從HTML變得缺失，導致其他div的轉變。

來源

2013-03-11 user2122160

有針對

$('#soilink').click(function() { 
    $('#soi').fadeTo(400, 1); 
});

一個fadeTo()功能如果你想創建切換效果，還有一個fadeToggle()功能。

$('#soilink').click(function() { 
    $('#soi').fadeToggle(400); 
});

更新：

這裏是如何做到這一點。

$('#soilink').click(function() { 
    $('#soi').stop().fadeTo(400, $('#soi').css('opacity') == 0 ? 1 : 0); 
});

來源

2013-03-11 01:58:01 Starx

好吧，我先做了切換功能。但是當div被隱藏時，其他div崩潰，我需要網站的結構來維護。所以我發現不透明衰落很好，因爲div始終保持它的位置。 – user2122160 2013-03-11 02:06:50

@ user2122160，在這種情況下，在'＃soi'之外創建一個固定容器，並在裏面保留'＃soi'。因此在褪色後保持結構完整。 – Starx 2013-03-11 02:19:56

沒關係，即使有div，結構仍然不同步。你希望我使用css修復它？ – user2122160 2013-03-11 02:35:35

$('#soilink').click(function() { 
    $('#soi').fadeToggle(); 
});

下面是一個例子，如何創建自定義切換，如果你永遠需要它：

var values=['v1', 'v2'], 
    c=0; // Set to "1" if you have your element initially hidden (display:none;) 
$('#element').click(function() { 
    console.log(values[c++%2])); // v2 // v1 // v2 // v1 // v2 ..... 
});

CUSTOM EXAMPLE - LIVE DEMO

來源

2013-03-11 02:01:03

這實際上工作，它保持了頁面的形式。有什麼辦法可以讓#soi div先被隱藏起來嗎？我試着讓不透明度從0開始，但是你必須點擊兩次鏈接才能使腳本工作。也許這是我需要處理的事情？ – user2122160 2013-03-11 03:00:22

@ user2122160實際上它非常簡單，假設你在你的CSS中擁有''#soi {display：none;}'而不是將「counter」值設置爲「1」而不是設置爲「0」http://jsbin.com/ufoxoh/4 /編輯 – 2013-03-11 10:33:11

爲#soi創建一個可見類具有所需的完全不透明度。然後在點擊鏈接時切換。

$('#soilink').click(function() { 
    $('#soi').toggleClass('visible', 400); 
});

JSFiddle

注意，這需要jQuery UI。

來源

2013-03-11 02:04:39

如何編寫簡單的點擊不透明度淡入？

回答

相關問題