Info rámeček

by Kleofáš Hatlapatka

HTML

<body>
    
    <div id="info">
        <div id="infoRamecek">
            <p>Pokud chce být informováni o kurzech a novinkách, stačí nám zanechat Váš mail.</p>
            <input type="text" name="prijmeni" placeholder="&nbsp Váš mail">
            <input id="infoRamecekOdeslani" type="submit" value="Objednat" id="tlacitkoOdeslat">
        </div>
        <div id="button"><p>Zasílání informací</p></div>
    </div>    
  
</body>

CSS

#infoRamecek                                                                        /* -Zasilani novinkek- */  
{ 
  position:absolute;
  bottom:50px;
  left:-300px;
  width:300px;
  height:200px;
  background:#7fffd4;
  border:3px solid #8bc53e;
 
}


#button
{
    position:absolute;
    bottom:50px;
    width:50px;
    height:200px;
    
    text-align:center;

}
#button p
{
  position:absolute;
  bottom:59px;
  left:-80px;
  font-size:25px;
  height:50px;
  width:200px;
  text-align:center;
  background:#7fffd4;
  border:3px solid #8bc53e;
  transform:rotate(-90deg);
  -ms-transform:rotate(-90deg); /* IE 9 */
  -webkit-transform:rotate(-90deg); /* Safari and Chrome */
  font-family: malujeme3;
  font-size:100%;
   
}

JavaScript

$(document).ready(function(){
    $("#button").click(function(){
        $("#button").fadeTo("fast","0.01",function(){
        });
        $("#infoRamecek").animate({left: "+=300px"},500,function(){
            $("#infoRamecek").mouseleave(function(){
                        $("#infoRamecek").animate({left: "-=300px"},500);
                        $("#button").fadeTo("10","1");
                        $("#infoRamecek").stop(animate);
            });
        });
    });
});