Button Animation

Playing around with animating a button to confirm.

by chapmanc

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<a href="#" class="btn btn-danger small"><i class="icon-trash icon-white"></i><span class="notext">Wissen</span></a>

CSS

body {margin:40px 40px; background: #ccc;}
.status {background:#ccc; color:#fff}
.small, .smalldisabled { text-align:left; height:18px; width:14px; opacity:1;}
.notext, .notextdisabled { position: relative;  left: -18px; opacity:0; color: #fff;}
.big {text-align:left; height:18px; width:65px; opacity:1; }
.showtext {position: relative;  left: 8px; opacity:1; color#fff;}

.smallloader {background: url("http://www.mediashake.nl/img/smallloader.gif") no-repeat; width:16px; height:16px; display:inline-block;}

/*sexy background*/ 

body {
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(0, 0, 0, .10)), 
        color-stop(.25, transparent),
        color-stop(.5, transparent), 
        color-stop(.5, rgba(0, 0, 0, .10)),
        color-stop(.75, rgba(0, 0, 0, .10)), 
        color-stop(.75, transparent), 
        to(transparent));
    background-image: 
        -moz-linear-gradient(-45deg, 
            rgba(0, 0, 0, .10) 25%, 
            transparent 25%,
            transparent 50%, rgba(0, 0, 0, .10) 50%, 
            rgba(0, 0, 0, .10) 75%, 
            transparent 75%, transparent
        );
    background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -webkit-background-size: 50px 50px;
    -webkit-animation: animate-stripes 2s linear infinite;
}

@-webkit-keyframes animate-stripes {
    from {
        background-position: 0 0;
    } 
    to {
       background-position: -50px 0;
    }
}

JavaScript

function confirmit() {
    event.preventDefault();
     $(".icon-trash").switchClass("icon-trash", "icon-comment",0);
    $(".small").stop(true, true).switchClass("small", "big", 500);
    setTimeout(function() {
        $(".notext").stop(true, true).switchClass("notext", "showtext", 600);
    }, 300);
};

function restoreit() {
    $(".icon-comment").switchClass("icon-comment", "icon-trash",0);
    $(".showtext").stop(true, true).switchClass("showtext", "notext", 600);
    setTimeout(function() {
        $(".big").stop(true, true).switchClass("big", "small", 500);
    }, 350);
};

function removeit() {
   
 $(".btn-danger").switchClass("btn-danger", "disabled", 0); 
    $(".icon-comment").stop(true, true).switchClass("icon-trash icon-white", "smallloader", 0);
 $(".showtext").stop(true, true).switchClass("showtext", "notextdisabled", 600);
setTimeout(function() { 
        
    $(".smallloader").stop(true, true).switchClass("smallloader icon-comment", "icon-ok", 0);  
;}, 3000);
    setTimeout(function() { 
        $(".big").stop(true, true).switchClass("big", "smalldisabled", 500);}, 50); 
};    


function preventclick() {
    event.preventDefault();
};


$(".small").on("click", confirmit);
$(".big").live("click", removeit);
$(".disabled").live("click", preventclick);
$(".big").live("mouseleave", restoreit);