Submit your widget

unordered list animated circle with jQuery

Created 13 years ago   Views 31269   downloads 6545    Author mobily
unordered list animated circle with jQuery
View DemoDownload
387
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;
}