правильное применение метода stop()

[Harvey]

Привет!

Есть проблема. Имеется 2 элемента '#tool-bar ul' по наведению и отведению на которые, появляется и скрывается объект dragHere . Проблема в том, что при быстром перемещении курсора туда сюда с первого элемента '#tool-bar ul' на второй и обратно, анимация появления и исчезновения воспроизводится несколько раз(очередь), а должна воспроизвестись только один раз. Я знаю , что проблема решается через метод stop(), но не знаю как правильно им воспользоваться в моем случае. Перепробовал уже кучу вариантов, но ни как.. Код приведен ниже. Подскажите пожалуйста как мне решить проблему?

var dragHere = $('.drag-here');
dragHere.css({opacity: 0}).hide();
$('#tool-bar ul').on('mouseenter', function(){dragHere.show(150).animate({opacity: 1}, 100)})
$('#tool-bar ul').on('mouseleave', function(){dragHere.animate({opacity: 0}, 100).hide(100)})

[beard]

Должно быть так

dragHere.stop().show(150).animate({opacity: 1}, 100)

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

[Deff]

var dragHere = $('.drag-here');
 dragHere.css({opacity: 0}).hide();
 var busy = false; //Флаг занятости

$('#tool-bar ul').on('mouseenter', function(){
     if(!busy){busy = true;
      dragHere.show(150).animate({opacity: 1}, 100, "linear", function(){
      busy = false;});
     }
});
$('#tool-bar ul').on('mouseleave', function(){
    if(!busy){busy = true;
      dragHere.animate({opacity: 0}, 100, "linear", function(){
      busy = false;}).hide(100)
    }
})

[Harvey]

Ни первый ни второй вариант не работают как надо. Первый вообще никак, а второй, при быстром переводе курсора с первого элемента на второй вообще не отображает анимацию объекта. В таком случае, это гораздо легче реализовать через колбэк

[melky]

Deff, подведём-отведём мышку, оно анимируется до конца и встанет. верно?

Harvey, http://jsfiddle.net/dBDYs/ Оно ? Я Вас не понял.

[beard]

Harvey, выложи код

[Deff]

melky,
Я не наю точно, что челу нун - возможно делать флаги раздельно на каждый из двух, возможно запуск сворачивания - запускать из сallback разворачивания

[Deff]

Универсально -
Смотреть/cтавить флаг данной анимации(сворачивания или разворачивания), если флаг - true - стопаем все иные анимашки на элемент, флаг на данную анимацию - в FALSE и запускаем свою, в СALLBACK - флаг данной анимации - TRUE ... выходим

[melky]

melky,
Я не наю точно, что челу нун - возможно делать флаги раздельно на каждый из двух, возможно запуск сворачивания - запускать из сallback разворачивания

Я, кстати, тоже его не понял.

[beard]

var dragHere = $('.drag-here');
 dragHere.css({opacity: 0}).hide();
 var busy = false; //Флаг занятости

$('#tool-bar ul').on('mouseenter', function(){
     if(!busy){busy = true;
      dragHere.show(150).animate({opacity: 1}, 100, "linear", function(){
      busy = false;});
     }
});
$('#tool-bar ul').on('mouseleave', function(){
    if(!busy){busy = true;
      dragHere.animate({opacity: 0}, 100, "linear", function(){
      busy = false;}).hide(100)
    }
})

оказывается я не один , когда эта трабла попадается пишу чтото подобно с флагами, но мне такой подход вообще не нравится (

Harvey, тяжело понять что тебе надо, но по моему здесь хороший пример используя стоп при оver и при out, не вижу глюков

Harvey, http://jsfiddle.net/dBDYs/ Оно ? Я Вас не понял.