Question

所以上面的问题可能很糟糕，但是，让我试着澄清一下。我有一个html页面，分为多个部分。我有一个右侧和左侧部分，在每个部分我都有div进一步拆分。其中一个div被称为rscontent，它在右侧保存内容，我有一个链接，一旦点击必须关闭rscontent中的所有内容。以下是执行此操作的代码：

    $('section#rightpanel').on('click', 'a#rsclose', function (event) {
    var $_closer = $(this);

    var $_sectionNav = $('header.sectionNav'); // needs to adjust size

    var $_sectionBody = $('section#body'); // needs to adjust size

    var $_rightpanel = $('section#rightpanel'); // needs to collapse this


    if ($_rightpanel.is('.collapsed')) {
        // is closed, so open it
        $_rightpanel.removeClass('collapsed').find('.rscontent').show();
        $_sectionBody.css('width', '56%');
        $_rightpanel.css('width', '34%');
        $_closer.html('Close');
    } else {
        // is open, so close it
        $_rightpanel.addClass('collapsed').find('.rscontent').hide();
        $_sectionBody.css('width', '90%');
        $_rightpanel.css('width', '2.8%');
        $_closer.html('Open');
    } // collapsed
    return false;
});

现在这样可行，但我的问题是如何添加淡入淡出效果，以便在一瞬间不会发生结束。我的css代码中有这个，但我不知道如何使用它。

    .fade {
 -webkit-transition: all 500ms linear;
 -moz-transition: all 500ms linear;
 -o-transition: all 500ms linear;
 -ms-transition: all 500ms linear;
}

任何人都知道如何做到这一点。我希望这个问题有道理。提前谢谢！

Answer 1

给定目标不透明度（在这种情况下为零）

.fade {
   opacity: 0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

将淡化类添加到您想要淡出的元素中。

香草

document.getElementById("MyElement").className += " fade";

的jQuery

$(elem).addClass("fade");

要在淡入淡出后触发行为，您可以使用jQuery的.fadeOut在这里看到：http://api.jquery.com/fadeOut/并添加一个'完整'回调或在添加类后在CSS中淡入淡出的持续时间设置一个计时器。

Answer 2

jQuery可以褪色。

以下是Fading

的jQuery文档

fadeToggle()似乎是您最感兴趣的一个，这里是fadeToggle() documentation plus examples

点击使用javascript点击一个部分？

2 个答案: