jquery fade in fade out on hover for multiple elements

问题

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

回答1:

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.

回答2:

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...

回答3:

First: Don't use the same id for all of your as and divs. 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.

回答4:

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)

回答5:

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.

回答6:

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);
    }
);

来源：https://stackoverflow.com/questions/8578307/jquery-fade-in-fade-out-on-hover-for-multiple-elements

标签

jquery

hover

fadein

fadeout