jQuery SlidePanels

by Florian Bar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="slidepanel">
    <ul class="slidepanel-wrap">
        <li>Panel 1</li>
        <li>Panel 2</li>
        <li>Panel 3</li>
        <li>Panel 4</li>
    </ul>
</div>

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.slidepanel {
    position: relative;
    overflow-x: hidden;
    border: 1px solid #333;
    height: 300px;
}
.slidepanel-wrap {
    position: absolute;
    top: 0;
    left: 0;
}
.slidepanel-wrap li {
    display: block;
    float: left;
    width: 150px;
    height: 300px;
    background-color: #ccc;
    border-left: 1px solid #333;
    text-align: center;
}
.slidepanel-wrap li:first-child {
    border-left: none;
}

JavaScript

/* CSS3 transition polyfill 
   =========================================== */

$.fn._transition = function (styles, duration, callback) {
    var $element = this;

    // Get properties that need to transition

    var properties = [];
    for (var prop in styles) {
        properties.push(prop);
    }
    var transitionProps = properties.join(', ');

    // Use css transitions if supported
    // otherwise use jQuery

    if (Modernizr.csstransitions) {

        var transitionStyles = {
            'transition-property': transitionProps, // eg. 'width, left, color'
            'transition-duration': duration + 'ms',
            'transition-timing-function': 'ease'
        };
        $element.css($.extend({}, styles, transitionStyles));

        setTimeout(function () {
            $element.css({ 'transition': 'none' }); // reset transition
            if (callback) { callback(); }
        }, duration);
    }
    else {
        $element.animate(styles, duration, callback);
    }
};



$(function () {
    
    var $element = $('.slidepanel');
    var $wrap = $('.slidepanel-wrap');
    var $panels = $('li', $wrap);

	var panelCount = $('.slidepanel-wrap li').length;
    var wrapWidth = panelCount * 150;
    
    var activeWidth = 200;
    var inactiveWidth = (wrapWidth - 200) / panelCount;
    
    $wrap.width(wrapWidth);
    
    $panels.mouseenter(function () {
        var $currentPanel = $(this);
    	$currentPanel.stop().animate({ 'width': '200px' }, 350);
        $panels.not($currentPanel).stop().animate({ 'width': inactiveWidth + 'px' }, 350);
    });
    
    $panels.mouseleave(function () {
        var $currentPanel = $(this);
    	$currentPanel.stop().animate({ 'width': '150px' }, 350);
        $panels.not($currentPanel).stop().animate({ 'width': '150px' }, 350);
    });
    
    $element.mousemove(function (e) {
        var elementWidth = $element.width();
        var position = 100 / elementWidth * e.pageX;
        console.log((wrapWidth / 100 *...