animate select tag

by krabat1

HTML

<span></span>
<div id="select"><select size="1">
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
</select></div>

CSS

body{margin:30px}
select{padding:10px;}
#select{display:inline-block;border:4px solid red;}
span{float:right;}

JavaScript

function sincdec(){
    if(($("select").attr("size"))==1){
        var mi="inc";
        var s=1;
        setInterval(function(){
            if(s<10){
                if($('#select').is(':hover') === true){
                    s++;$("select").attr("size",s);
                    $("span").html(s);
                }
            }
        },10);
    }
    else if(($("select").attr("size"))==10){
        var mi="dec";
        var s=10;
        setInterval(function(){
            if(s>1){
                if($('#select').is(':hover') === false){
                    s--;$("select").attr("size",s);
                    $("span").html(s);
                }
            }
        },10);
    }
};

$("select").hover(function(e){
   sincdec();
});