CSS动画可以处理淡入吗？

Question

首先对我缺乏理解提前道歉。在互动方面，我是菜鸟。

我的目标是在按下链接时淡入或更改一个 div 的不透明度，然后淡出或更改其余两个 div 的不透明度。

以下是视觉参考：

用 CSS 实现它的最佳方法是什么，还是需要 Jquery？如果是后者，请您指出教程的方向吗？

Answer 1

你可以这样使用：

HTML：

<a href="#tab1">Link1</a>
<a href="#tab2">Link2</a>
<a href="#tab3">Link3</a>
<div id="tabs">
    <div id="tab1"></div>
    <div id="tab2"></div>
    <div id="tab3"></div>
</div>

CSS：

#tabs > div {
    opacity: 0;
    transition: opacity 1s;
}
#tabs > div:target {
    opacity: 1;
}

Demo

或者，您可以使用 JavaScript 添加 .active 类，而不是使用哈希和 :target。

Answer 2

这是一个如何使用 jQuery 实现的示例 - http://jsfiddle.net/pgy69/

$('body').on('click', '.foo', function() {
    $(this).animate({ // the one that you clicked on
        opacity: 1 // animate its opacity to full
    }, 1000, function() { // do it in one second, then call a function
        $('.foo').not( $(this) ).animate({ // the ones you didn't click on
            opacity: 0.2 // animate their opacity to almost transparent
        }, 1000); // in one second
    });
});

这个函数的结果是一个动画，淡入，在淡出开始之前完成。您可以通过重新排列函数 some 使这些同时发生。

Answer 3

例如，您可以...

HTML

<div id="links">
    <a>Link1</a>
    <a>Link2</a>
    <a>Link3</a>
</div>
<div id="tabs">
    <div>Tab1</div>
    <div>Tab2</div>
    <div>Tab3</div>
</div>

CSS

#tabs > div.blurred {
    opacity: 0.5; // set your value here
}
#tabs > div {
    opacity: 1;
    transition: opacity 1s;
}

Javascript (jQuery/Zepto)

$('#links > a').click(function(){
    // this will get the index of the link within it's parent
    var index = $(this).index();
    // blur everything
    $('#tabs>div').addClass('blurred');
    // but keep the tab on the same index within it's parent active
    $($('#tabs>div').get(index)).removeClass('blurred');
});

您可以将逻辑从“模糊”反转为“活跃”