0

因此，上面的问题可能措辞不佳，但是，让我在这里尝试澄清一下。我有一个 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;
}

有人知道怎么做吗。我希望这个问题是有道理的。提前致谢！

4

2 回答 2

3

给定目标不透明度（在本例中为零）

.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 之后为淡入淡出的持续时间设置一个计时器添加类。

于 2013-06-26T23:37:51.160 回答
1

jQuery 可以做淡入淡出。

这是Fading的 jQuery 文档

fadeToggle()似乎是您最可能感兴趣的，这里是fadeToggle () 文档和示例

于 2013-06-26T23:38:55.623 回答