CSS动画能处理淡入效果吗？

Question

首先，提前为我的理解不足道歉。当涉及交互时，我是一个初学者。

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

以下是视觉参考：

如何用 CSS 最好的方式来实现它，还是需要使用 Jquery？如果是后者，请指向一个教程方向。

- user2898276

---

CSS无法处理点击事件，但您可以使用http://api.jquery.com/fadein/，http://api.jquery.com/fadeout/和http://api.jquery.com/click/。如果您设置了CSS类，并且每个CSS声明都利用了变换属性，则不必使用fadeOut()和fadeIn()从元素中添加或删除这些类。 - Jay Blanchard

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

演示

另外，你也可以使用JavaScript来添加一个.active类代替使用哈希值和:target。

- Oriol

---

请记住，如果要支持Safari浏览器，则需要使用-webkit-前缀。请参考http://www.w3schools.com/cssref/css3_pr_transition.asp。 - Medda86

你如何处理点击事件？ - Jay Blanchard

@JayBlanchard 当单击锚点时，它会更改哈希值，然后我就可以获取所需元素的:target选择器。 - Oriol

@JayBlanchard 你也可以使用tabindex属性和:focus，例如：http://jsfiddle.net/qwfVk/4/ 或者这个例子：http://jsfiddle.net/AmQ3v/1/ - G-Cyrillus

哇，非常酷。我不知道您可以在CSS中处理单击事件。 http://jsfiddle.net/xCZwv/ - Jay Blanchard

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

这个函数的要点是，在淡入动画完成之后，才开始淡出动画。如果需要同时进行，可以重新排列该函数。

- Jay Blanchard

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

或者，您可以将逻辑从“模糊”更改为“活动”

- Goodwine