.notransition

Use of a notransition class to prevent animation between positions some of the time.

by nate

HTML

<div></div>
<div></div>
<div></div>

<p><a href="#">Left</a> | <a href="#">Right</a></p>

CSS

div {
    display: block;
    height: 200px;
    position: absolute;
    width: 100px;
    
    -webkit-transition: all 0.5s;
}

div:nth-child(1) {
    background-color: red;
}

div:nth-child(2) {
    background-color: green;
}

div:nth-child(3) {
    background-color: blue;
}

.current {
    left: 50%;
    margin-left: -50px;
}

.left {
    left: 0;
}

.right {
    left: 100%;
    margin-left: -100px;
}

.notransition {
    -webkit-transition: none;
}

p {
    font: 18px monospace;
    padding-top: 250px;
}

a {
    color: #999;
    text-decoration: none;
}

JavaScript

var $body = $( 'body' ),
    $divs = $( 'div' ),
    position = [ 0, 1, 2 ];

// Initial setup
$divs.eq( position[0] ).addClass( 'left' );
$divs.eq( position[1] ).addClass( 'current' );
$divs.eq( position[2] ).addClass( 'right' );

$( 'a' ).bind( 'click', function( event ) {

    var i,
        length = position.length,
        delta,
        $event = $( event.currentTarget ),
        direction = $event.text().toLowerCase;    
   
    if ( direction === 'left' ) {
        delta = -1;
    } else {
        delta = 1;
    }
    
    for ( i = 0; i < length; i += 1 ) {
        position[i] += delta;
        
        if ( position[i] < 0 ) {
            position[i] = length - 1;
        }
        
        if ( position[i] > length - 1 ) {
            position[i] = 0;
        }
    }
    
    $divs.attr( 'class', '' );
    
    $divs.eq( position[0] ).addClass( 'left' );
    $divs.eq( position[1] ).addClass( 'current' );
    $divs.eq( position[2] ).addClass( 'notransition' ).addClass( 'right' );
    
    $divs.find( '.notransition' ).removeClass( 'notransition' );
    
    event.preventDefault();
    
});