JQuery code that works in all browsers except FF
I wrote the following jquery sitting in the tag headers of my HTML
It is assumed that an image that is hovered at full opacity slides another image over it to the right, and then returns when it is not frozen.
<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>
This works fine in Safari, Chrome, IE (7,8), but not in FF 3.6.
Any suggestions why this might be?
Sorry I forgot to say that opacity works, but sliding image doesn't.
Many thanks
UPDATE: new to stackoverflow, so I hope I put this requested code in the right place
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; }
I also want them to be clickable links.
Also, I noticed that the slider works in IE8, but not with the opacity change.
NB. It also works in IE6
Thanks again
UPDATE:
When tested using FF on a separate Windows machine running XP (my main machine is Mac OSX 10.5) it still doesn't move, just opacity changes (which is the original issue).
a source to share
Ok, it seems like your HTML is invalid. Tags a
should not be wrapped with tags li
, see HTML below. With this change, the JS needed to be changed as well.
As a side note, instead of chaining calls children().children(..)
, a single call also works 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>
a source to share