Submit your widget
HomeImage Effectsunordered list animated circle with jQuery

unordered list animated circle with jQuery

Created 13 years ago   Views 30978   downloads 6450    Author mobily
unordered list animated circle with jQuery
View DemoDownload
385
Share |

jQuery plugin (2KB) that allows you to create an unordered list as an animated circle.

Changelog:

fixes for hover event, added direction option (clockwise or counter-clockwise)

added hover trigger

fixes for click event 

$('.blocks').mobilyblocks({
    trigger: 'click', // click or hover
    direction: 'clockwise', // clockwise or counter
    duration: 500, // duration of animation
    zIndex: 50, // z-index value of 'li' elements
    widthMultiplier: 1.15
});

HTML:

<div class="blocks">
    <ul class="reset">
        <li> .. </li>
        <li> .. </li>
        <li> .. </li>
        <!-- etc. -->
    </ul>          
</div>

CSS:

.blocks {
    display:block;
    width:;
    height:; /* you need to specify width and height values */
    position:relative;
    cursor:pointer;
}
 
ul.reset,
ul.reset li {
    display:block;
    list-style:none;
    padding:0;
    margin:0;
}
 
ul.reset li {
    position:absolute;
}

You might also like