Как связать конечное событие перехода с несколькими элементами, не выполняя несколько функций?

Question

У меня есть список, содержащий изображения, и я перемещаю их с помощью css-перехода.

Поскольку эти изображения большие, я должен использовать css-переход для элементов списка, чтобы избежать мерцания в Safari.

<ul id="container">
    <li class="moveLeft>...</li>
    <li class="moveLeft">...</li>
    <li class="moveLeft>...</li>
    <li class="moveLeft>...</li>
    <li class="moveLeft>...</li>
</ul>

Проблема в том, что функция, связанная с концом перехода, выполняется 5 раз (количество элементов), если я использую связывание с элементом ul:

$("container").bind("webkitTransitionEnd", function() {
    doSomething()
});

Я пытался связатьобработчик события на втором дочернем элементе списка, но поскольку элементы списка обновлены (элементы удалены, добавлены) , обработчик события остановится, когда будет заменен второй элемент.

$("container").children().eq(2).bind("webkitTransitionEnd", function() {
    doSomething()
});

Я думаю, что решение состоит в том, чтобы связать обработчик событий с родителем, но как я могу выполнить функцию один раз вместо пяти при каждом запуске события?

Answer 1

Вы можете использовать .live() вместо .bind() или, что еще лучше, новый .on().Метод .on () заменяет все предыдущие вложения обработчика событий: http://api.jquery.com/on/

Но в вашем случае может быть более эффективным (с точки зрения производительности) использовать только один переход (перевод) на<ul>, чтобы собрать вместе все <li>, которые он содержит.

Answer 2

Для привязки только к родительскому li (в вашем случае): вы можете использовать nth-child()

Например:

$("#container li:nth-child(1)").bind("webkitTransitionEnd", function(event) {
    doSomething();
});
function doSomething() {
  //do something

}