我已经在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/

10-11 23:54
查看更多