Question

我在我的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中没有。

为什么会出现这种情况的任何建议？

抱歉，我忘了说不透明度有效，但滑动图像没有。

非常感谢

UPDATE：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，但不适用于不透明度变化。

NB。它也适用于IE6

再次感谢

更新：

当在运行XP的单独Windows机器上使用FF进行测试时（我的主机是Mac OSX 10.5），它仍然没有滑过，只是不透明度发生了变化（这是最初的问题）。

Answer 1

好的，您的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>

Answer 2

对我来说在FF上运行正常。也许您无法加载图标，使其看起来好像在Firefox上没有发生任何事情？

http://jsfiddle.net/NGyxN/2/

Jquery代码在除FF之外的所有浏览器中工作

2 个答案: