Я написал следующий 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), она по-прежнему не скользит, а изменяется только непрозрачность (что является первоначальной проблемой).