Please note: This page provides documentation for an old version of Kwicks. If possible, you should check out the latest version instead.

Kwicks 1.5.1 Example: Custom Easing

Custom duration and easing (easing plugin required).


Custom duration and easing (easing plugin required).


<!DOCTYPE html>
        <title>Kwicks 1.5.1 Example: Easing</title>
        <style type='text/css'>
            .kwicks {
                /* recommended styles for kwicks ul container */
                display: block;
                list-style: none;
                position: relative;
                margin: 0;
                padding: 0;
            .kwicks li{
                /* required, but the values are up to you (must be pixels) */
                width: 125px;
                height: 100px;
                /* margin should be same as spacing option */
                margin-right: 5px;

                /* do not change these */
                display: block;
                overflow: hidden;
                padding: 0;
                cursor: pointer;
                float: left;                
            #kwick_1 {
                background-color: #53b388;
            #kwick_2 {
                background-color: #5a69a9;
            #kwick_3 {
                background-color: #c26468;
            #kwick_4 {
                background-color: #bf7cc7;
                margin-right: none;
        <ul class="kwicks">
            <li id="kwick_1"></li>
            <li id="kwick_2"></li>
            <li id="kwick_3"></li>
            <li id="kwick_4"></li>

        <script type='text/javascript' src='../js/jquery-1.2.6.min.js'></script>
        <script type='text/javascript' src='../js/jquery.easing.1.3.js'></script>
        <script type='text/javascript' src='../jquery.kwicks.js'></script>
        <script type='text/javascript'>
            $(function() {
                    max: 205,
                    spacing: 5,
                    duration: 1500,  
                    easing: 'easeOutBounce'