Как синхронизировать анимацию?
Вот мой код: jsfiddle.net/x14brt2k/1/
Как видно я имею n-элементов, при наведении на которые меняется фоновая картинка. Если я проведу мышкой по всех элементах одновременно, то они все начнут "открываться" и "закрываться". Как сделать так, чтобы одновременно мог открываться и закрываться только один элемент? То есть один элемент открывается - другой закрывается. Не может быть такого, что два и больше элемента открываются или закрываются. Большое спасибо за помощь. Дополнения: или пусть одновременно можно "открываться" и "закрываться", просто если пользователь открывает элемент А, а затем переключился на B, то начать закрывать элемент А, а не дожидаться его открытия. Как такое сделать? |
<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>
|
да, но нужно сделать плавное изменения.
|
Цитата:
Навел на один - он открылся... Навел на другой - но пока не закроется первый, второй не должен открываться? Тогда, что делать если курсор ведут по этим элементам? |
Тайминг сократить и все. Уменьшить количество кадров, или времени.
|
Идею взял с сайта 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>
|
При ховере используй "stop()".
|
|
Цитата:
|
Вот так мне и нужно, только на чистом js.
Написал второй вариант, но элементы останавливаются в не подходящий момент. (например если водить мишкой туда - сюда по всех элементах) http://jsfiddle.net/x14brt2k/3/ Как исправить не могу понять. |
| Часовой пояс GMT +3, время: 01:30. |