Rotate rectangle

by janetyc

HTML

<input type="button" value="open" />
<div id="win"></div>

CSS

#win{
    margin: 30px;
    width: 100px;
    height: 8px;
    display: block;
    background: rgb(200,0,120);
}

JavaScript

$(function() {
    var $elie = $("#win"), degree = 0, timer;
    
    function open() {
        
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            ++degree; 
            if(degree>=30){
                degree = 0;
            }else{
                open();                
            }
            
        },5);
    }
    function close() {
        
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            --degree; 
            if(degree<=0){
                degree = 0;
            }else{
                close();                
            }
            
        },5);
    }
    
    $("input").toggle(function() {
        open();
    }, function() {
        close();
    });
});