JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://get.qexy.org/mobilyblocks.js"></script>
<link rel="stylesheet" href="http://get.qexy.org/default.css">
<body>
<div id="content">
<div class="socials">
<ul class="reset">
<li><a href="#"><img src="http://get.qexy.org/delicious.png" alt="" /></a></li>
<li><a href="#"><img src="http://get.qexy.org/digg.png" alt="" /></a></li>
<li><a href="#"><img src="http://get.qexy.org/google.png" alt="" /></a></li>
<li><a href="#"><img src="http://get.qexy.org/stumbleupon.png" alt="" /></a></li>
<li><a href="#"><img src="http://get.qexy.org/technorati.png" alt="" /></a></li>
<li><a href="#"><img src="http://get.qexy.org/twitter.png" alt="" /></a></li>
</ul>
</div>
</div>
</body>
JavaScript
(function($){$.fn.mobilyblocks=function(options){
var defaults={
trigger:"click",
direction:"clockwise",
duration:750,
zIndex:10,
widthMultiplier:1.2
};
var sets=$.extend({},defaults,options);
return this.each(function(){
var $t=$(this),
w=$t.width(),
h=$t.height(),
parent=$t.find("ul"),
list=parent.find("li"),
size=list.length,
hov=false,dir;
if(sets.direction=="clockwise"){
dir=-1
}else{
if(sets.direction=="counter"){
dir=1
}
}
var socials={
init:function(){
parent.hide().css({zIndex:sets.zIndex});
$t.append($("<a />").addClass("trigger").css({
display:"block",
position:"absolute",
zIndex:1,
top:0,
left:0,
width:"100%",
height:"100%"
}));
switch(sets.trigger){
case"click":socials.click();break;
case"hover":socials.hover();break;
default:socials.click()}
},
click:function(){
var trigger=$t.find("a.trigger");
trigger.bind("click",function(){
if($t.hasClass("close")){
parent.fadeTo(sets.duration,0);
socials.animation.close();
$t.removeClass("close")
}else{
parent.fadeTo(sets.duration,1);
socials.animation.open();
$t.addClass("close")
}
return false
})
},
hover:function(){
var trigger=$t.find("a.trigger");
trigger.bind("mouseover",function(){
if(hov==false){
parent.fadeTo(sets.duration,1);
socials.animation.open();
$t.addClass("close")
}
});
parent.bind("mouseleave",function(){
$t.removeClass("close");
parent.fadeTo(sets.duration,0);
socials.animation.close();
hov=true;setTimeout(function(){hov=false},500)
})
},
animation:{
open:function(){
socials.ie.open();
list.each(function(i){
var li=$(this);
li.animate({
path:new...