我在 HTML 的 head 标签中编写了以下 jquery
它应该使悬停的图像完全不透明，并从右侧将另一个图像滑到其上，然后在取消悬停时返回。
<script type="text/javascript">
$(function() {
$('ul#img-nav li').css({
"opacity": .5
});
$('ul#img-nav li').hover(function() {
$(this).stop(true).animate({"opacity":1});
$(this).children('.overlay').stop(true).animate({"left" : "18px" });
}, function() {
$(this).stop(true).animate({"opacity":.5});
$(this).children('.overlay').stop(true).animate({"left" : "180px" });
});
});
</script>
这在 Safari、Chrome、IE (7,8) 中运行良好，但在 FF 3.6 中不起作用。
有什么建议吗？
抱歉，我忘了说不透明度有效，但滑动图像无效。
非常感谢
更新:stackoverflow 的新手，所以我希望我将此请求的代码放在正确的位置
HTML:
<ul id="img-nav">
<a href="index.html">
<li>
<img src="images/nav-img1.jpg" alt="nav-img1" width="146" height="145" />
<img class="overlay" src="images/overlay-exterior.png" alt="overlay-exterior" width="123" height="135" />
</li>
</a>
<a href="exterior.html">
<li>
<img src="images/nav-img2.jpg" alt="nav-img2" width="146" height="145" />
<img class="overlay" src="images/overlay-exterior.png" alt="overlay-exterior" width="123" height="134" />
</li>
<a href="maintenance.html">
<li>
<img src="images/nav-img3.jpg" alt="nav-img3" width="146" height="145" />
<img class="overlay" src="images/overlay-exterior.png" alt="overlay-exterior" width="123" height="134" />
</li>
<a href="other.html">
<li class="last">
<img src="images/nav-img4.jpg" alt="nav-img4" width="146" height="145" />
<img class="overlay" src="images/overlay-exterior.png" alt="overlay-exterior" width="123" height="134" />
</li>
</a>
</ul><!--END #img-nav-->
CSS
ul#img-nav li {float:left; width: 146px; margin-right:103px; position: relative; display:block; height: 145px; overflow:hidden;}
ul#img-nav li img {position:absolute; top:0; left:0;}
ul#img-nav li img.overlay {position: absolute; top: 5px; left: 180px; }
我还希望它们成为可点击的链接。
另外，我注意到 slider 在 IE8 中可以工作，但不透明度不能改变。
注意。它也适用于 IE6
再次感谢
更新:
当在运行 XP 的单独 Windows 计算机(我的主计算机是 Mac OSX 10.5)上使用 FF 进行测试时，它仍然不会滑动，只是不透明度发生变化(这是最初的问题)。
最佳答案
好的，看来您的 HTML 无效。 a 标签不应包裹 li 标签，请参阅下面的 HTML。随着这一改变，JS 也需要改变。
顺便说一句，代替链式 children().children(..) 调用，单个 find(..) 调用也可以工作。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul#img-nav li').css({
"opacity": .5
});
$('ul#img-nav li').hover(function() {
$(this).stop(true).animate({"opacity":1});
$(this).children().children('.overlay').stop(true).animate({"left" : "18px" });
}, function() {
$(this).stop(true).animate({"opacity":.5});
$(this).children().children('.overlay').stop(true).animate({"left" : "180px" });
});
});
</script>
<style type="text/css">
ul#img-nav li {float:left; width: 146px; margin-right:103px; position: relative; display:block; height: 145px; overflow:hidden;}
ul#img-nav li img {position:absolute; top:0; left:0;}
ul#img-nav li img.overlay {position: absolute; top: 5px; left: 180px; }
</style>
</head>
<body>
<ul id="img-nav">
<li>
<a href="index.html">
<img src="base.jpg" alt="nav-img1" width="146" height="145" />
<img class="overlay" src="overlay.png" alt="overlay-exterior" width="123" height="135" />
</a>
</li>
<li>
<a href="exterior.html">
<img src="base.jpg" alt="nav-img2" width="146" height="145" />
<img class="overlay" src="overlay.png" alt="overlay-exterior" width="123" height="134" />
</a>
</li>
<li>
<a href="maintenance.html">
<img src="base.jpg" alt="nav-img3" width="146" height="145" />
<img class="overlay" src="overlay.png" alt="overlay-exterior" width="123" height="134" />
</a>
</li>
<li class="last">
<a href="other.html">
<img src="base.jpg" alt="nav-img4" width="146" height="145" />
<img class="overlay" src="overlay.png" alt="overlay-exterior" width="123" height="134" />
</a>
</li>
</ul>
</body>
</html>
关于Jquery 代码适用于除 FF 之外的所有浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2634830/