JQuery код работает во всех браузерах, кроме FF - PullRequest
2 голосов
/ 14 апреля 2010

Я написал следующий jquery, сидящий в заголовке тегов моего HTML

Предполагается, что изображение, на которое наведено изображение, будет полностью прозрачным, и наведем на него другое изображение справа, а затем вернемся, когда оно не наведено.

    <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, но нет изменения непрозрачности.

NB. Он работает и в IE6

Еще раз спасибо

UPDATE:

При тестировании с использованием FF на отдельной машине с Windows под управлением XP (моя основная машина - Mac OSX 10.5), она по-прежнему не скользит, а изменяется только непрозрачность (что является первоначальной проблемой).

Ответы [ 2 ]

2 голосов
/ 14 апреля 2010

Хорошо, кажется, ваш 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>
0 голосов
/ 14 апреля 2010

Отлично работает на FF для меня.Возможно, вы не можете загрузить значок, чтобы он выглядел так, как будто ничего не происходит в Firefox?

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...