jquery fade in fade out on hover for multiple elements
Question
I am working on a portfolio page and would like to use jquery to fade in some information over the image when the user hovers over the item.
I am quite new to back-end jquery stuff so just starting to get my hands dirty.
I have managed to get the fade in and out to work on a singular div element, but I need it to work independently for each one. I assume this requires some kind more dynamic code, but I'm not sure where to start.
If you look below I have the code which works for one item. The div appears when you hover over the first image. This is the structure I need as the real portfolio has this basic structure. I just need the code to get it working for the other two. There will be multiple hover overs in the live site.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
#box{
position:relative;
width:150px;
height:150px;
float:left;
display:block;
background:black;
margin-right:20px;
}
#boxover{
position:absolute;
top:10px;
left:0px;
width:100%;
height:20px;
z-index:100;
background:white;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('#box').hover(over, out);
});
function over(event)
{
$('#boxover').fadeIn(2000);
$('#boxover').css("display","normal");
}
function out(event)
{
$('#boxover').fadeOut(2000);
}
</script>
</head>
<body>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">hello</div></a>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">there</div></a>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">rob</div></a>
</body>
</html>
If someone could show me how to make each one work independently that would be great.
I'm guessing a rel attribute like lightbox?
I'm happy to give each image a separate id/rel. I just don't want to replicate the css.
Hope that makes sense :)
OK, so I have updated it but it still doesn't work. I can see what is going on, but not sure the exact syntax to get it working.
Here is my new code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
.box{
position:relative;
width:150px;
height:150px;
float:left;
display:block;
background:black;
margin-right:20px;
}
.boxover{
position:absolute;
top:10px;
left:0px;
width:100%;
height:20px;
z-index:100;
background:white;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('.box').hover(over, out);
});
function over(event){
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeIn(2000);
},
function out(event) {
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeOut(2000);
}
</script>
</head>
<body>
<a href="#" class="box" id="over_1"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_1" class="boxover">hello</div></a>
<a href="#" class="box" id="over_2"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_2" class="boxover">there</div></a>
<a href="#" class="box" id="over_3"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_3" class="boxover">rob</div></a>
</body>
</html>
I think I'm nearly there as the pseudo logic makes sense, but it's still not working.
Cheers
Rob
6 answers
solution1
4 2011-12-20 16:19:30
Here you go: http://jsfiddle.net/Mm66A/13/
Please don't use ID fields for naming things "box,box,box", use the Class of 'box' to say that each item is of type 'box'. You can give each box a UNIQUE id.
solution2
0 2011-12-20 16:08:32
You can't have more than one element with the same id in valid html. Change each id to class and change your jquery selectors from $('#box') and $('#boxover') to $('.box') and $('.boxover') and this should work for you...
solution3
0 2011-12-20 16:10:03
First: Don't use the same id for all of your a s and div s. An id is a unique identifier of an element, for "groups" of elements there is the class attribute.
To get the corresponding box to show/hide, use the advanced selectors of jquery, trying to get the one box which is directly before the hovered element.
solution4
0 2011-12-20 16:10:06
You could do:
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">hello</div></a>
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">there</div></a>
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">rob</div></a>
$(function() {
$('.box').hover(over, out);
});
function over(event) {
$('.boxover', this).fadeIn(2000);
$('.boxover', this).css("display", "normal");
}
function out(event) {
$('.boxover', this).fadeOut(2000);
}
fiddle here http://jsfiddle.net/rynma/
Basically you must use classes instead of ids because id must be unique and you pass a context to the jquery selector to restrict the selection to the context (i use this )
solution5
0 2011-12-20 16:10:51
Depending on the browsers you're targeting, you don't need jQuery at all . If you have to target IE and can't suffer the immediate change instead of transitioning, you could conditionally comment a reference to a Javascript for it like the other posters have mentioned.
solution6
0 2011-12-20 16:13:58
i would give each a tag a unique id, and give the over box an id of 'over_' + id_of_box_link and change id=box to class=box then you can apply the hover by doing this:
you cannot have duplicate IDs.
<a href="javascript:void(0)" class="box" id="over_1"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="box_over_1">hello</div></a>
<a href="javascript:void(0)" class="box" id="over_2"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="box_over_2">there</div></a>
<a href="javascript:void(0)" class="box" id="over_3"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="box_over_3">rob</div></a>
$(".box").hover(
function () {
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeIn(2000);
},
function () {
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeOut(2000);
}
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.