div 的 jQuery SlideDown 立即覆盖在图像 SlideUp 上
我正在尝试在图像上创建一个叠加层,当将鼠标悬停在图像上时,该叠加层会滑入和滑出。与此问题相同的原因 - JQuery Text slipDown / slipUp Overlay on Image一直弹跳?。
我已将代码放在 jsFiddle 中,以便可以访问 - http://jsfiddle.net/jamescallaghan/hg9r7/< /a>
任何帮助将不胜感激。
I'm trying to create an overlay on a image that slides in and out when hovering over the image. Same reason as this question - JQuery Text slideDown / slideUp Overlay on Image Keeps Bouncing?.
I have placed my code in jsFiddle so it is accesible - http://jsfiddle.net/jamescallaghan/hg9r7/
Any help would be much appreciated.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我认为您遇到的问题是悬停是基于图像元素而不是 .slide,因此当文本面板向上滑动时它会覆盖图像,当您移动鼠标时它会充当悬停/取消悬停。
请看一下这个,我刚刚更新了你的代码。应该适用于多张幻灯片:) 希望这有帮助!
http://jsfiddle.net/NuWna/2/
祝一切顺利,
安东尼
I think the issue you were having was that the hover was based off the image element and not the .slide so when that text panel slid upwards it covered the image and when you moved the mouse it acted as a hover/unhover.
Please take a look at this, i just updated your code a bit. should work with multiple slides :) Hope this helps!
http://jsfiddle.net/NuWna/2/
All the best,
Anthony
您可能应该对每个功能使用 mouseenter 和 mouseleave。
唯一的问题是,如果鼠标位于向上滑动的新 div 上,它就会向下滑动。所以你需要解决这个问题。
这是部分修复:
http://jsfiddle.net/hg9r7/3/
编辑:实际上是您的代码已经完成的操作,因此没有真正的改进。您的代码的问题是,您的鼠标光标有时会越过您正在拉起的框,这意味着您要离开 .slide img
You should probably use mouseenter og mouseleave for each function.
the only issue is that if the mouse is over the new div you slide up, it will slide down. so you need to fix that.
this is a partial fix:
http://jsfiddle.net/hg9r7/3/
edit: actually that is what you code already did, so no real improvement. the issue with your code, is that your mouse cursor sometimes goes over the box you are pulling up and that means you are leaving .slide img