Как синхронизировать анимацию?

[dkhlus]

Вот мой код: jsfiddle.net/x14brt2k/1/

Как видно я имею n-элементов, при наведении на которые меняется фоновая картинка. Если я проведу мышкой по всех элементах одновременно, то они все начнут "открываться" и "закрываться".

Как сделать так, чтобы одновременно мог открываться и закрываться только один элемент?

То есть один элемент открывается - другой закрывается. Не может быть такого, что два и больше элемента открываются или закрываются.

Большое спасибо за помощь.

Дополнения: или пусть одновременно можно "открываться" и "закрываться", просто если пользователь открывает элемент А, а затем переключился на B, то начать закрывать элемент А, а не дожидаться его открытия. Как такое сделать?

[bes]

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

ul {
	list-style: none;
}
li:hover {
	background-position: -30px;
}
</style>
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
</style>

[dkhlus]

да, но нужно сделать плавное изменения.

[ksa]

Как сделать так, чтобы одновременно мог открываться и закрываться только один элемент?

То есть один элемент открывается - другой закрывается. Не может быть такого, что два и больше элемента открываются или закрываются.

Как ты это себе представляешь?
Навел на один - он открылся...
Навел на другой - но пока не закроется первый, второй не должен открываться?
Тогда, что делать если курсор ведут по этим элементам?

[kostyanet]

Тайминг сократить и все. Уменьшить количество кадров, или времени.

[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>

[hfts_rider]

При ховере используй "stop()".

[hfts_rider]

"Пример"

[bes]

я не могу реализовать такую идею: один элемент открывается, мы резко переключились на второй, а первый должен начать закрываться с того места, до которого он открылся.

разве не это происходит в моём примере?

[dkhlus]

Вот так мне и нужно, только на чистом js.

Написал второй вариант, но элементы останавливаются в не подходящий момент. (например если водить мишкой туда - сюда по всех элементах)

http://jsfiddle.net/x14brt2k/3/

Как исправить не могу понять.