JQuery меню слайд вправо

Question

Я делаю простое меню в список, в котором внутри каждого отдельного элемента есть второе меню.

ul.first li и ul.second li

Меню будет сдвигаться вправо, потому что этоменю на левой стороне веб-сайта.

Я написал это на jQuery:

var secs1 = $('ul.first > li');

secs1.hover(

    function () {
        $(this).find('ul.second').animate({ width: 'toggle' }, 500);
    },
    function () {
        $(this).find('ul.second').animate({ width: 'toggle' }, 250);
    }

);

Он отлично работает, но внутри есть проблема!

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

Это первая мысль, которую я хочу исправить!

Вторая:

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

Спасибо!

РЕДАКТИРОВАТЬ:

Посмотреть на Fiddle

Answer 1

Вот правильный код. Проверено, опрятно и работает. Наслаждайтесь!

http://jsfiddle.net/ReuLr/6/

Answer 2

Вам нужно использовать плагин hoverIntent для JQuery. Проверьте это демо: http://css -tricks.com / simple-jquery-dropdowns /

Answer 3

Вам просто нужно добавить .stop () перед .animate () , и это предотвратит очередь анимаций.

$('ul.first > li').find('ul.second').hover(
    function () {
        $(this).stop().animate({ width: 'toggle' }, 500);
    },function () {
        $(this).stop().animate({ width: 'toggle' }, 250);
    }
);

Answer 4

Вы ищете метод .stop(). Для переданных параметров первый true очищает очередь анимации, а второй false останавливается, где бы вы ни находились в анимации, прежде чем продолжить, вместо того, чтобы перейти к концу анимации:

var secs1 = $('ul.first > li');

secs1.hover(

    function () {
        $(this).find('ul.second').stop(true, false).animate({width:'toggle'}, 500);
    },
    function () {
        $(this).find('ul.second').stop(true, false).animate({width:'toggle'}, 250);
    }

);