So after attending a local coding club meeting for the first time I became inspired to look into jQuery again and try and replicate something one of the speakers talked about. I have got the general idea of the problem done ok, it’s just that I can’t seem to make the image (that is being hovered over by the cursor) appear over the image that isn’t been hovered over. I thought that adjusting the z-index would help negate this but nothing appears to be working.
I have uploaded the files etc to http://www.downloadthatmovie.com/jquery/, and here is the source code for the page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Animation 3</title>
<style type="text/css">
.imgOpa
{
height:200px;
width:200px;
opacity:0.5;
filter:alpha(opacity=50);
z-index:0;
}
article{
padding:20px;
}
img{
z-index:0;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
</head>
<body>
<article>
<p>
<img class="imgOpa" src="img/image1.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image2.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image3.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image4.jpg" alt="Image 1" />
<img class="imgOpa" src="img/image5.jpg" alt="Image 1" />
</p>
</article>
<script type="text/javascript">
$(function() {
$('.imgOpa').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ "opacity": 1.0, "margin-top":0, "margin-right":0, "margin-right":-50, "z-index":999, "height":250, "width":250 }, 100);
},
function() {
$(this).stop().animate({ "opacity": 0.5, "margin-top":0, "margin-right":0, "margin-right":0, "z-index":1, "height":200, "width":200 }, 100);
})
});
});
</script>
</body>
</html>
The way the images behave right now probably looks weird, but I’m just testing a few things out before I tackle a larger problem. As I said earlier, I am wanting the image that is being hovered over by the cursor to be above the other images. It has been 4 months since I last touched jQuery but have finally kicked myself awake and am re-acquainting myself with it.
Cheers everyone!
This SO thread pointed me to on this post on stacking context. Just add