SlideUp SlideDown 动画错误

发布于 2024-11-29 09:49:28 字数 513 浏览 2 评论 0原文

我有一个div,当鼠标悬停在上面时,第二个图像向上滑动,当鼠标离开时,它会向下滑动,动画正是我想要的,但如果你鼠标进出太快,而不让动画完成它,它就会出现错误,并且只会转到您离开动画的高度。任何帮助都会非常有帮助,我已经看了几天不同的博客,但我似乎找不到解决办法,我正在使用原型和 sciptaculous 这是我的代码:

$('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;

}

i have a div when hovered over and second image slides up and when the mouse leaves it slides back down, the animation is exactly how i want it but if you mouse in and out too quickly without the letting the animation finish it bugs and will only go to the height which you left the animation. Any help would be really helpful been looking at different blogs for days on it and i can't seem to find a fix, I'm using prototype and sciptaculous here's my code:

$('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;

}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

迷迭香的记忆 2024-12-06 09:49:28

您需要使用 Scriptaculous 效果队列。

一旦事件发生,您的处理程序就会立即异步触发,因此当事件发生得非常快时,处理程序会相互重叠和冲突。您真正想要的是让它们在队列中排队并按顺序执行,只要它们前面的一个完成即可。

这是一篇关于它的非常好的文章:
http://script.aculo.us/docs/EffectQueues.html

您的代码将如下所示像这样:

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

您还可以执行一些操作,例如创建多个效果队列(如果它们相互干扰)。这篇文章很好地解释了这一切。

华泰
-肯

You need to use the Scriptaculous Effects Queue.

Your handlers are firing immediately and asynchronously as soon as the events happen, so when the events happen very quickly the handlers overlap and conflict with each other. What you really want is for them to line up in a queue and execute sequentially, as soon as the one before them is finished.

Here's a really good article about it:
http://script.aculo.us/docs/EffectQueues.html

Your code will look like this:

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

You can also do things like create multiple effect queues if they interfere with each other. The article does a good job explaining all of it.

HTH
-Ken

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文