Остановить анимацию подменю на несколько кликов

У меня есть подменю, которое слайды слева от экрана (слева: -662px) влево: 342px. Это срабатывает при нажатии на основной элемент меню.Остановить анимацию подменю на несколько кликов

Подменю отходит назад до -662px, если основное меню снова нажата. Моя проблема в том, что если основной элемент меню щелкнут быстро, элемент подменю продолжает перемещаться по странице 342px за раз. Он не двигается вперед и назад, как ожидалось.

Это происходит только во время анимации элементов - при нажатии на основной пункт меню после того, как подменю завершило анимацию, он возвращается к -662px, как следует.

Я попытался добавить .stop(), чтобы не повлиять. Кто-нибудь знает, как это исправить?

//IF IS SHOWN, HIDE 
$("#menu ul li").click(function() { 
    $("#menu ul li ul").each(function() { 
    //GET SUBMENUS CURRENT POSITION 
    var sub2pos = $(this).css('left'); 
     //IF MARGIN IS GREATER THE 340PX HIDE THE MENU 
     sub2pos = parseInt(sub2pos); 
     if(sub2pos > 340){ 
     $(this).stop().animate({ left: '-=662px' }, 400); 
     } 
    });//END EACHFUNCTION 
});//END 1st CLICK FUNCTION 

//IF IS HIDDEN, SHOW 
$("#menu ul li").click(function() { 
     //GET SUBMENUS CURRENT POSITION 
     var sub2pos = $(this).children('ul').css('left'); 
     //IF MARGIN IS LESS THEN 342PX SHOW THE MENU 
     sub2pos = parseInt(sub2pos); 
     if(sub2pos < 342){ 
      $(this).children('ul').delay(500).stop().animate({ left: '+=662px' }, 400); 
     } 
});//END 2nd CLICK FUNCTION

EDIT: Я создал здесь скрипку. http://jsfiddle.net/q5Htx/19/ Обратите внимание, что происходит при нажатии на пункт меню быстро

источник

2013-03-13 MeltingDog

Обратите внимание, что sub2pos <"342px" представляет собой сравнение строк, оно не делает то, что вы ожидаете. – Bemmu

@Bemmu, вы правы, и я исправил его, но моя первоначальная проблема все еще преобладает. – MeltingDog

вам нужно зарегистрировать sub2pos * console.log (sub2pos) * и посмотреть, что происходит в быстрой последовательности щелчков по родительскому :). –

Я полагаю, что я нашел проблему:

Я должен был быть более конкретным на 2-ом, если оператор, где подменю выдвижная. Вместо <342 Я должен был указать отрицательное положение элемента: <= -662. Таким образом, анимация не будет активирована, если бы div находился, скажем, left 150px или где-либо еще между +342 и -662.

источник

2013-03-13 07:02:28 MeltingDog

Я хотел бы предложить несколько вещей:

Подведите Отображение и скрытие логики к функции с, если-ElseIf блоки, чтобы решить, какой из них для выполнения.

function menuClickHandler(menu){//logic goes here}

Затем свяжите событие .click только один раз и вызовите эту функцию.

$(document).ready(function(){ 
    $("#menu ul li").on('click', function(e) { 
     menuClickHandler($(this)); 
    }); 
});

Затем организуйте unbind/bind события click в вашей функции до и после анимации меню.

Больше кода here в обновлении для вашей скрипки

-notice, что я использую включение/выключение в коде. Используется bind/unbind, чтобы объяснить, потому что они звучат грамматически правильно.

источник

2013-03-13 07:41:48 uchamp

Остановить анимацию подменю на несколько кликов

ответ

Смежные вопросы