Question

I’m working on a carousel where the center image needs to be in full color and all the other images in the carousel are desaturated.

The way i wanted to achieve this was to have an <img> and a desaturated <canvas> of that image absolutely positioned on top of one another in an <li>. Then when the slide is active, the canvas fades out, revealing the color slide behind it. When the active class is removed from that li, the canvas fades back in.

I’ve got the jquery slider working, adding and removing the classes to the li, and the two images positioned just fine, but the canvas is not fading. I’ve tried a variety of ways, but my jquery knowledge is not so great and has yielded no results. Any suggestions?

My markup is basically this:

<ul>
    <li>
        <canvas />
        <img />
    </li>
    <li class="active">
        <canvas />
        <img />
    </li>
    <li>
        <canvas />
        <img />
    </li>
</ul>

Answer 1

You can use .fadeOut() and .fadeIn() to fade in/out the canvas elements. Something like:

$('ul').find('canvas').fadeIn().filter('.active').fadeOut();

If you want to use CSS for the animated fade in/out then you could use CSS3 transitions for opacity, then set an opacity for the active class.

canvas {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}
.active {
    opacity: 0;
}

I normally use Modernizr to check the compatibility of the user’s browser for CSS3 transitions.