[dkhlus]

Идею взял с сайта http://www.coolwebmasters.com/
В моем коде, я считаю, проблема в том, что я не могу реализовать такую идею: один элемент открывается, мы резко переключились на второй, а первый должен начать закрываться с того места, до которого он открылся. И наоборот. Можете подправить?

<style>
li {
    width: 30px;
    height: 30px;
    float: left;
    background: red;
    border: 2px solid black;
    background-image: url([url]http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/arrows.png);[/url]
    transition: background-position 0.3s;
}

ul {
    list-style: none;
}

li:hover {
    background-position: -30px;
}
</style>
<ul>
    <li></li>
    <li></li>
22
    <li></li>
    <li></li>
</ul>
</style>
<stript type="text/javascript">
var elems = document.getElementsByTagName('li');
function setOver(el) {
    el.onmouseover = function(e) {
        var target = e.target || e.srcElement;
        var j = 0;
        //var j = parseInt(el.style.backgroundPosition); //not work
        var t = setInterval(function(){
                if (j == -30) {
                    clearInterval(t);
                }
                j-=1;
                el.style.backgroundPosition = j +'px';
            }, 7);
    }
}

function setOut(el) {
    el.onmouseout = function(e) {
        var target = e.target || e.srcElement;
        var j = -30;
        //var j = parseInt(el.style.backgroundPosition); //not work
        var t = setInterval(function(){
                if (j == 0) {
                    clearInterval(t);
                }
                j+=1;
                el.style.backgroundPosition = j +'px';
            }, 7);
    }
}

for(i=0; i < elems.length; ++i) {
    setOver(elems[i]);
    setOut(elems[i]);
}
</stript>