我已经在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; }
我也希望它们是可点击的链接。
另外,我注意到滑块在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 - jQuery代码可在除FF外的所有浏览器中使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2634830/