Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Sliding divs in css3 and jquery

Sliding divs in css3 and jquery

Problem

I am working on a web project where I want to have a row of images at the top of the page, but all of the images will be Blurred out except for one.

What I was thinking was a div that overlays each image with a background colour of white and the opacity set to something like 0.5 with one of the images being completely visible.

There will be two buttons, previous and next and when one of these buttons are pressed the clear div will slide over the next image to reveal that image and the previous image will have been blurred like mentioned above.

Does anyone have any ideas on how I could do achieve this..

Thanks for your help

Problem courtesy of: Boardy

Solution

Made a little test, did you mean something like that? To make them actually blurred out isn't as easy though. But it's a starting point i think.

Demo:
http://jsfiddle.net/2MExB/3/

HTML:


CSS:

li{
 float:left;   
}

#c{
    position:relative;
    overflow:hidden;    
}
#m{
    position:absolute;
    top:0;
    border:0 solid white;
    height:100%;
    width:100px;   
    opacity:.8;
}​

JS:

$(function() {
    var current = 0;
    $('button').click(function(ev) {
        current += 1 * ($(this).text() == 'next' ? 1 : -1);
        show();
        ev.preventDefault();
    });

    function show() {
        var c = $('ul li').length;
        current = current  c - 1 ? 0 : current);
        var $t = $('ul li:eq(' + current + ')');
        var l = $t.position().left;
        var w = $t.width();
        var cw = $('#c').width();
        $('#m').stop().animate({
            'width': w,
            'border-width': '0 ' + (cw - l - w) + 'px 0 ' + l + 'px'
        }, 300);
    }
    show();
});​
Solution courtesy of: Andy

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Sliding divs in css3 and jquery

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×