当我将鼠标悬停在图像上时,我正在制作一个淡入淡出图像和div的图像。我有两个问题:
图像和div上的淡入淡出似乎没有以相同的速度移动,即使我将它们设置为。
我无法弄清楚如何让div只显示你悬停的图像。如果我可以键入(“this”div.info)作为对象,它将正常工作。有没有办法做到这一点?
我无法让$(".info",this)
,$(this).find(".info")
或$(".info", $(this).closest("li"))
工作。
结果:我找到了解决方案。我能够通过使用lthibodeaux的建议并使用$(".info", $(this).closest("li"))
作为对象并使所有函数.fadeTo
到此处获取结果来使其工作:
http://jsfiddle.net/Z5p4K/7/
编辑:
我发现图像和div动画确实以相同的速度移动,只是图像只在悬停时设置了z-index,所以如果你在动画运行时将鼠标移开图像,当图像在div后面时它似乎以不同于div的速度移动,它似乎只是以不同的速度移动,因为当div变得不可见时你可以看到它背后的图像但是当它变得不透明时,图像消失了(让你认为当div真正在图像前面时图像变得不可见)。通过将z-index属性从ul.columns li:hover img
移动到ul.columns li img
可以轻松解决此问题。
当你在它上面盘旋时,div只有一个边界。通过将边框属性从ul.columns li:hover .info
更改为ul.columns li .info
在此处查看最终版本:http://jsfiddle.net/tV9Bw/
这是最终版本,因为我再也找不到任何代码的任何问题;一切都经过优化,没有任何故障,看起来很棒。
感谢所有回答的人和易江编辑这篇文章的格式更好。我是这个网站的新手,所以我不确定如何正确格式化我的问题。
并非常感谢artyom.stv修复脚本中的最后一个故障,我不知道如何修复。
答案 0 :(得分:2)
你有一般的想法。关于选择器你应该知道的一件事是你能够定义第二个参数作为选择器的范围,即
$("selectorString", scopeObject)
在您的情况下,请创建第二个参数$(this).closest("li")
。它将找到包含您图像的列表项,并选择该容器的.info
后代:
$(".info", $(this).closest("li")).fadeIn(1000);
答案 1 :(得分:1)
将$(".info")
更改为$(this).find(".info")
,一切都会很好。
答案 2 :(得分:0)
是的,您可以使用Bundy
提到的$(this).find(".info")
之类的内容
但是作为 jQuery构造函数接受第二个参数,该参数可用于覆盖选择的上下文。 你也可以这样做:
$(".info",this)