jQuery的淡入淡出为多个元素的悬停 [英] jquery fade in fade out on hover for multiple elements
问题描述
我正在处理一个投资组合页面，并希望在用户悬停在该项目上时使用jquery淡入图片中的某些信息。
我很安静新的后端jQuery的东西，所以刚刚开始让我的手脏。
我已设法使淡入和淡出工作在一个单一的div元素，但我需要它为每个人独立工作。我认为这需要一些更具动态性的代码，但我不知道从哪里开始。
如果您看下面，我有适用于一个项目的代码。当您将光标悬停在第一张图片上时，div就会出现。这是我需要的结构，因为真正的投资组合具有这种基本结构。我只需要代码来让它为另外两个工作。
<！DOCTYPE html>
< html>
< head>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.jstype =text / javascript>< / script>
< title> Robs Test< / title>
< style>
body {background：grey;}
div {position：relative;}
#box {
position：relative;
width：150px;
height：150px;
float：left;
display：block;
背景：黑色;
margin-right：20px;
}
#boxover {
position：absolute;
top：10px;
left：0px;
宽度：100％;
height：20px;
z-index：100;
背景：白色;
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.jpgalt =testwidth =150height =150/>< div ID = boxover >你好< / DIV>< / A>
< a href =＃id =box>< img src =anyimage.jpgalt =testwidth =150height =150/>< div ID = boxover >还有< / DIV>< / A>
< a href =＃id =box>< img src =anyimage.jpgalt =testwidth =150height =150/>< div ID = boxover >抢劫< / DIV>< / A>
< / body>
< / html>
如果有人能告诉我如何让每个人都独立工作，那会很棒。
我猜像lightbox这样的rel属性？
我很高兴为每张图片分配一个id / rel。我只是不想复制CSS。
希望有道理：）
好的，那么我已经更新了它，但它仍然不起作用。我可以看到发生了什么，但不确定使用它的确切语法。
这是我的新代码：
<！DOCTYPE html>
< html>
< head>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.jstype =text / javascript>< / script>
< title> Robs Test< / title>
< style>
body {background：grey;}
div {position：relative;}
.box {
position：relative;
width：150px;
height：150px;
float：left;
display：block;
背景：黑色;
margin-right：20px;
}
.boxover {
position：absolute;
top：10px;
left：0px;
宽度：100％;
height：20px;
z-index：100;
背景：白色;
display：none;
}
< / style>
< script type =text / javascript>
$（function（）{
$（'。box'）。hover（over，out）;
}）;
函数结束（事件）{
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 =boxid =over_1>< img src =pier.jpgalt =testwidth =150height =150/ >< div id =box_over_1class =boxover> hello< / div>< / a>
< a href =＃class =boxid =over_2>< img src =pier.jpgalt =testwidth =150height =150/ >< div id =box_over_2class =boxover> there< / div>< / a>
< a href =＃class =boxid =over_3>< img src =pier.jpgalt =testwidth =150height =150/ >< div id =box_over_3class =boxover> rob< / div>< / a>
< / body>
< / html>
我认为我已经差不多了，因为伪逻辑很有意义，但它仍然不起作用。 / p>
<干杯>
Rob
在这里你可以：
http://jsfiddle.net/Mm66A/13/
请不要使用ID字段命名box，box，box的东西，使用'box'类来表示每个项目是'box'类型。你可以给每个盒子一个唯一的ID。
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
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.
这篇关于jQuery的淡入淡出为多个元素的悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
