Question

好的，所以我只是试图让不透明度从0变为1，然后在点击时变为1到0。我假设我需要写一个if语句。这是现在的代码。

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

    );

所以现在，如果我点击我网站上的链接，名为#soi的div区域将会淡入。但是，第二部分是我需要再次单击该链接以使其淡化为0没有完全弄明白那一部分。

修改

我想要切换，但是使用切换功能会导致div完全不在html中，导致其他div移位。

Answer 1

有一个fadeTo()函数

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

如果您正在尝试创建切换效果，则还有一个fadeToggle()功能。

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

更新

以下是如何做到这一点。

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

Answer 2

$('#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

Answer 3

为#soi创建一个具有所需完全不透明度的可见类。然后点击链接切换。

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

<强> JSFiddle

请注意，这需要jQuery UI。

如何写一个简单的点击不透明淡化？

3 个答案: