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

Question

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

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

    );

所以现在，如果我点击我网站上的链接，名为#soi 的 div 区域会淡入。但是，第二部分是我需要能够再次点击该链接，以便它淡入 0。Haven' t完全想通了那部分。

编辑

我希望它可以切换，但是使用切换功能会导致 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。