Can CSS animations handle fade in?

Question

First of all apologise in advance for my lack of understanding. I'm I noob when it comes to interactions.

My goal is to fade in or change the opacity one div when a link is pressed and fade out or change the opacity the remaining two.

Below is a visual reference:

How might be the best way to do it with CSS or does it require Jquery? If the latter could you please point me in the direction of a tutorial?

Answer 1

You may use something like this:

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

Alternatively, instead of using hashes and :target you could use JavaScript to add an .active class.

Answer 2

Here is an example of how to do it with 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
    });
});

The upshot of this function is that one animation, the fade in, completes before the fade out is started. You can make these occur simultaneously by rearranging the function some.

Answer 3

You could have for example...

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

Alternative you could invert the logic from "blurred" to "active"