jQuery для мобильных телефонов спам и анимация - PullRequest
1 голос
/ 21 марта 2012

Я сказал, что 5 элементов списка с изображениями внутри помещены в 200 пикселей друг от друга.Я пытаюсь анимировать эти элементы списка, чтобы скользить по горизонтали влево, если кто-то нажимает на ссылку с id = #next, или если кто-то проводит пальцем влево.И наоборот, для скольжения элементов списка вправо.

Каждый щелчок или пролистывание приводит к анимации слайда в 200 пикселей на каждый элемент списка.Я столкнулся с проблемой, когда спам с помощью кнопки #next или #prev отменяет текущую анимацию и запускает новую.Это приводит к тому, что элементы списка не скользят 200px + 200px + 200 ... но что-то вроде этого 200px + 140px + 120 ... Это потому, что, как я сказал, анимация обрезается, и поэтому расстояние скольжения будет короче.* Теперь я решил это для события click, отключив кнопку до запуска анимации, а затем снова включив ее в функции end callbak.Но эта проблема остается для события смахивания.

Как я могу решить эту проблему для события смахивания?

Ответы [ 2 ]

1 голос
/ 21 марта 2012

Если у вас есть код, работающий для ваших click обработчиков событий, тогда просто .trigger() событие щелчка на соответствующем элементе для каждого из событий swiperight и swipeleft:

$(document).delegate('#next', 'click.my-namespace', function () {
    ...
}).delegate('#prev', 'click.my-namespace', function () {
    ...
}).delegate('#my-page-id', 'swipeleft swiperight', function (event) {
    if (event.type == 'swipeleft') {
        $('#next').trigger('click.my-namespace');
    } else {
        $('#prev').trigger('click.my-namespace');
    }
});

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

Обратите внимание: я связал обработчики событий с пространствами имен, чтобы вы случайно не вызвали неправильный обработчик событий.

Вы также можете использовать .stop(true, true), но это может сделать ваши анимации нервными при воспроизведении многих подряд. Лучшее решение при использовании .stop() - всегда анимировать до абсолютного значения, никогда не используйте +=200px, поэтому при использовании .stop() анимация может быть остановлена ​​и мгновенно перезапущена до новой абсолютной позиции: http://api.jquery.com/stop

0 голосов
/ 21 марта 2012

Один из способов сделать это - установить логическую переменную, которая является глобальной для скрипта со значением по умолчанию, равным false.Затем установите для переменной значение true до анимации и установите ее обратно в false после завершения анимации.Прежде чем отключить анимацию, проверьте состояние переменной, запускайте анимацию, только если она ложна.Код будет выглядеть примерно так:

var isAnimating = false;

function animate()
{
   if(!isAnimating) {
       //Animation code
       isAnimating = false;
   }
}

Если анимация асинхронная, вам следует установить isAnimating = false в функции завершения анимации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...