Calendar Sliding Test

by mstarkman

HTML

<div class="right">Right</div>
<div class="left">Left</div>
<a class="button" href="#" style="z-index: 3; float: right">Make it work!</a>

CSS

.right {
    background-color: red;
    height: 120px;
    width: 120px;
    z-index: 1;
    position: absolute;
}

.left {
    background-color: yellow;
    height: 120px;
    width: 120px;
    z-index: 2;
    position: absolute;
}

JavaScript

$(document).ready(function() {
    $(".button").click(function(event) {
        event.preventDefault();
        $(".left").effect('slide', { direction: 'right', mode: 'hide' }, 'slow');
        $(".right").effect('slide', { direction: 'left', mode: 'show' }, 'slow');
        
    });
});