jQuery Festivities…yes it’s nearly Christmas!

by Kev Ritchie 18. November 2010 13:39

After reading The Beebs post on how to create a jQuery rollover like the one on Dribbble.com.  It got me thinking about how this or other effects could be used to create an Advent Calendar.

The animate function has been in the jQuery library for a while now (v1.0 I think, correct me if I’m wrong), but I thought that even though it’s not a new function of jQuery, it’s exactly what I need to achieve my goal…a door sliding effect.

Click here for a demo

If you want to replicate it, here are a few steps to help:

1. Add a reference to the jQuery library:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" language="javascript"
        type="text/javascript"></script>

2. Next write a little HTML mark-up to build each of the calendar doors:

<div class="day">
    <div class="overlay">
        <img src="bells25.jpg" />
        <h2>1</h2>
    </div>
    <img class="image" src="1.jpg" />
</div>

3. And now for some styling.  Or in my case an attempt Smile

<style>
        .day
        {
            position: relative;
            border: solid 2px black;
            width: 150px;
            height: 150px;
            display: inline-block;
            overflow: hidden;
            margin: 5px;
        }
        
        .overlay
        {
            font-size: 2.0em;
            text-align: center;
            width: 150px;
            height: 150px;
            background-color: #ffffff;
            /*  Setting the position to absolute here keeps the image and text on top */
            position: absolute;
            z-index: 1;
        }    

        .image
        {
            position: relative;
            width: 150px;
            height: 150px;
        }

        h2
        {
            color: red;
        }
</style>

4. Now for the jQuery magic.  In step 2 we defined our layout using DIVs, each DIV had a class name, these names are important for this step to work.

First we add a jQuery ready function that will fire when the document is ready.  In this function, we immediately start to hook up our methods to create the “sliding door” effect.  We search the document for a DIV called .day and attach a hover function to it.  We then search that DIV for another DIV called .overlay.  When this element is found, we add the animation using the animate function.

We use two animate methods.  One to change the position of the overlay to the day DIV width and the second to set it back.

<script>

    $(document).ready(function() {

        $('.day').hover(function(){
        
        /* Get the day div width */
        var width = $(this).outerWidth();
        
        /* Change the position of the overlay to the day div width with an animation effect */
        $(this).find('.overlay').animate({ right : width },
                {queue:false,duration:300});
    }, function() {
        /* When the mouse is no longer hovering over the div set the position back. */
        $(this).find('.overlay').animate({ right : '0px' },
                {queue:false,duration:300});
        });

        /* queue:false = start the animation immediately, it won't wait for the previous 
animation to stop */
        /* duration:300 = how long the animation will take to finish in this case 0.3 
seconds. */
    });
    
</script>

Try the demo above.  Feel free to add to it criticise it, let me know how you get on!

Powered by BlogEngine.NET 2.5.0.6
Theme by Mads Kristensen | Modified by Mooglegiant