ошибка анимации slideUp slideDown

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

$('mid_about_us').observe('mouseenter',function() {
$('about_us_mo').slideDown({duration: 0.5});
}); 
$('mid_about_us').observe('mouseleave',function() {
$('about_us_mo').slideUp({duration: 0.5});
}); 

#about_us_mo{
position: absolute;
float: left;
bottom: 452px;
left: 4px;
z-index:99999;
overflow: hidden;

}


hover prototypejs slidedown scriptaculous slideup
person George    schedule 10.08.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно использовать очередь эффектов Scriptaculous.

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

Вот очень хорошая статья об этом:
http://script.aculo.us/docs/EffectQueues.html

Ваш код будет выглядеть так:

$('about_us_mo').slideDown({duration: 0.5, queue: 'end'});

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

HTH-Кен

person Ken    schedule 10.08.2011