我可以在jQuery中添加更多“this”吗?
我正在编写一个脚本,当你将鼠标hover在图像上时,它会淡入和淡出图像和图像后面的div。 我有两个问题:
-
即使我将它们设置为,图像和div上的淡入淡出似乎也没有以相同的速度移动。
-
我无法弄清楚如何让div只显示你hover的图像。 如果我可以键入(“this”div.info)作为对象,它将正常工作。 有没有办法做到这一点?
我无法获得$(".info",this)
, $(this).find(".info")
或$(".info", $(this).closest("li"))
上class。
结果:我找到了解决方案。 我能够通过使用lthibodeaux的建议并使用$(".info", $(this).closest("li"))
作为对象并创建所有函数.fadeTo
使其工作.fadeTo
到此处获取结果: http ://jsfiddle.net/Z5p4K/7/
编辑:
-
我发现图像和div动画确实以相同的速度移动,只是图像只在hover时设置了z-index,所以如果你在动画运行时将鼠标从图像中移开,它会显得移动当div真正在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修复脚本中的最后一个故障,我不知道如何修复。
你有一般的想法。 关于选择器你应该知道的一件事是你能够定义第二个参数作为选择器的范围,即
$("selectorString", scopeObject)
在你的情况下,使第二个参数$(this).closest("li")
。 它将找到包含您的图像的列表项,并选择该容器的.info
后代:
$(".info", $(this).closest("li")).fadeIn(1000);
将$(".info")
更改$(".info")
$(this).find(".info")
,一切都会很好。
是的,你可以使用像邦迪所提到的$(this).find(".info")
但是,因为jQuery构造函数接受第二个参数,可用于覆盖选择的上下文。 你也可以这样做:
$(".info",this)