CSS动画可以处理淡入淡出吗？

Question

首先，由于我缺乏理解而提前道歉。在谈到互动时，我就是noob。

我的目标是在按下链接时淡入或更改不透明度，并淡出或更改剩余两个的不透明度。

以下是视觉参考：

用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添加:target类，而不是使用哈希值.active。

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

这个功能的结果是一个动画，即淡入，在淡出开始之前完成。您可以通过重新排列函数来同时进行这些操作。

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

替代方案，您可以将模糊与＃34;模糊＆＃34;到＆＃34;活跃＆＃34;