Animated toolTip and checkbox div

by Joe Saad

HTML

<input type="checkbox" class="first" />
<div class="first menu"></div>
<input type="checkbox" class="second" />
<div class="second menu"></div>
<a href="#" class="tipy">show me the menu</a>
<div class="tipy">Dapibus vel elementum dis! Aliquet, et mus, et augue tempor! Nunc tempor, ultricies velit ut egestas, ac nunc proin est vel, tincidunt, sit vut. Ridiculus nec, tempor elementum. Vut m</div>

CSS

div, input,a {clear:both;float:left;}
div.menu {border:1px solid blue; width:300px; height:30px; visibility:hidden;}
div.tipy { position:absolute;display:none; border:1px solid green;  }

JavaScript

$(function() {
    $('input[type="checkbox"]').click(function(){
     //   alert(this.className);
        if ($(this).is(':checked')) {
            //alert('checked');
            $('div.'+this.className).css('visibility','visible');         
        }
        else {
            $('div.'+this.className).css('visibility','hidden');   
        }         
    });
    $('a').hover(function(){
         // alert(this.className+$(this).offset().top + ","+ $(this).offset().left);                 
        $('div.'+this.className).css({"top":$(this).offset().top+5,"left":$(this).offset().left+120,"width":"0px","height":"0px","display":"block"}).animate({"width":"200px","height":"120px"});         
    }, 
                 function(){
                     $('div.'+this.className).delay(3565).animate({"width":"0px","height":"0px"});
                  //  $('div.'+this.className).delay(1356).hide();
    
    });
});