jQuery 闪烁 mouseOver 问题
我有一张图像,上面显示了标题。标题浮动在图像上方并显示在底部。
我有一个 jQuery 事件,当您将鼠标悬停在图像上时,它会显示标题。就像这样:
function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}
当你推出时:
function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}
但是,当你滚动标题时,它认为你已经推出图像并淡出。有办法解决这个问题吗?
这是一个链接:示例
谢谢,库尔顿
I have a image that has a caption displayed on it. The caption floats over the image and is displayed at the bottom.
I have a jQuery event that when you rollover the image, it displays the caption. Like so:
function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}
And when you roll out:
function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}
However, when you rollover the caption, it thinks that you have rolled out of the image and fades out. Is there anyway to fix this?
Here's a link: Example
Thanks, Coulton
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我查看了你的 JS,但我找不到触发标题显示的内容 - 你应该将事件绑定到图像的父 div,这样它就不会淡出。如果它当前仅绑定到图像,那就是您的问题。 PS - 包含代码示例总是有帮助的。
I took a look at your JS but I couldn't find what triggers the display of the caption - you should be binding the event to the parent div of the image, that way it won't fade out. If it is currently bound to just the image, that's your problem. P.S - it always helps to include a code example.
这是一个小提琴,它展示了如何做到这一点的示例。当鼠标进入该元素时,它只是在该标题元素上调用
stop
:stop
函数取消在所选元素(在本例中为标题元素)上运行的任何动画)。Here is a fiddle that shows an example of how you could do it. It simply calls
stop
on the caption element when the mouse enters that element:The
stop
function cancels any animation that is running on the selected element (in this case, the caption element).