Estudo com animação em jquery-ui

by edgardleal

HTML

<div id="ball1" class='ball'></div>
<div id="ball2" class='ball'></div>
<div id="ball3" class='ball'></div>
<div id="ball4" class='ball'></div>

CSS

.square{
    width : 30px;
    height : 30px;
    background : green;
    float : left;
    margin : 3px 0 0 3px;
    filter : grayscale(100%);
    position : absolute;
}
.square:HOVER{
    box-shadow : 0 0 4px yellow;
}
.ball{
   background : black;
    overflow : hide;
   width : 30%;
   height : 30%;
   position : absolute;
   left : 50%;
   top : -30%;
}

#ball1{
    border-top-left-radius : 15px;
    clip : rect(0px, 15px, 15px, 0px);
    background : red;
}
#ball2{
    border-top-right-radius : 15px;
    clip : rect(0px, 30px , 15px, 15px); ;
    background : green;
}
#ball3{
    border-bottom-left-radius : 15px;
    clip : rect(15px, 15px , 30px, 0px);
}
#ball4{
    clip : rect(15px, 30px , 30px, 15px);
    border-bottom-right-radius : 15px;
}

JavaScript

var inc = 0;
var abrirVertical = function(){
  $("#ball1, #ball2")
  .animate({top: "20%"}, 1000);
    $("#ball3, #ball4")
    .animate({top: "80%"}, 1000);
}
function createSquare(){
    
  $('body').append("<div class='square' style='" +
                   (inc * 32) + "px'></div>");   
    ++inc;
}
$(document).ready(function(){
//for(var i = 0 ; i < 1; i++)
//  createSquare();  
    $('.ball').animate({top : '50%'}, 1000,
    function(){
        $("#ball1, #ball3")
        .animate({left: '20%'}, 1000, abrirVertical);
        $("#ball2, #ball4")
        .animate({left: '80%'}, 1000);
    }                  
                      );
    //alert('done');
    $('div').mouseenter(function(){
    })
    .mouseleave(function(){
        $(this).animate({width : '0px', left : '+=15px'}, 300,
     function(){            
       $(this)
                            //.css('background', 'red')
                            .animate(
                                {width : '30px', left : '-=15px'}, 500);
                        });

    });
 });