Jquery 如何编写一个简单的点击不透明度渐变？

好的，我只是试着让不透明度从0变为1，然后单击1变为0。我假设我需要写一个if语句。这是目前的代码

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

    );

所以现在，如果我点击我网站上的链接，名为#soi的div区域就会消失。然而，第二部分是，我需要能够再次单击链接，使其淡入0。我还没弄清楚那部分

编辑

我希望切换，但是使用toggle函数将导致div完全从html中消失，从而导致其他div发生移动

这有一个函数

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

如果您尝试创建切换效果，还有一个函数

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

更新：

下面是如何做到这一点

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

这有一个功能

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

如果您尝试创建切换效果，还有一个函数

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

更新：

下面是如何做到这一点

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

以下是一个示例，说明如何在需要时创建自定义切换：

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 .....
});

以下是一个示例，说明如何在需要时创建自定义切换：

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 .....
});

---

为

#soi

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

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

---

请注意，这需要。

为

#soi

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

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

---

请注意，这需要。

好的，我先做了切换功能。但是当div被隐藏时，其他div就会崩溃，我需要维护站点的结构。因此，我发现不透明度衰减很好，因为div始终保持它的位置。@user2122160，在这种情况下，在

#soi

外部创建一个固定容器，并将

#soi

保持在内部。因此在衰减后保持结构的完整性。好的，即使有一个div，结构仍然不同步。你想让我用css修复它，对吗？@user2122160，是的，当我修复它时，给它一个

#soi

的高度宽度。顺便说一下，我应该提到我正在使用骨架网格系统来保持事物的有序性。因此，当我使用与#soi相同列的div类时，我认为这会指定。好的，我首先做了切换函数。但是当div被隐藏时，其他div就会崩溃，我需要维护站点的结构。因此，我发现不透明度衰减很好，因为div始终保持它的位置。@user2122160，在这种情况下，在

#soi

外部创建一个固定容器，并将

#soi

保持在内部。因此在衰减后保持结构的完整性。好的，即使有一个div，结构仍然不同步。你想让我用css修复它，对吗？@user2122160，是的，当我修复它时，给它一个

#soi

的高度宽度。顺便说一下，我应该提到我正在使用骨架网格系统来保持事物的有序性。因此，当我使用与#soi相同列的div类时，我认为这会指定。这实际上起了作用，它保持了页面的形式。有什么办法可以让我先把“soi div”藏起来吗？我试着让不透明度从0开始，但是你必须点击链接两次，脚本才能工作。也许这是我需要处理的事情？？？@user2122160实际上它非常简单，假设你的CSS中有：

#soi{display:none；}

而不是将“counter”值设置为

1

而不是

0

，实际上，它保持了页面的形式。有什么办法可以让我先把“soi div”藏起来吗？我试着让不透明度从0开始，但是你必须点击链接两次，脚本才能工作。也许这是我需要处理的事情？？？@user2122160实际上它很简单，假设你的CSS中有：

#soi{display:none；}

而不是将“counter”值设置为

1

而不是

0