ejemplo - jquery se desvanece en fade out en hover para varios elementos
jquery show (6)
Estoy trabajando en una página de cartera y me gustaría usar jquery para atenuar cierta información sobre la imagen cuando el usuario pasa el cursor sobre el elemento.
Soy bastante nuevo en el back-end de jquery, así que empiezo a ensuciarme las manos.
Logré hacer entrar y salir el fundido para trabajar en un elemento div singular, pero necesito que funcione independientemente para cada uno. Supongo que esto requiere algún tipo de código más dinámico, pero no estoy seguro de por dónde empezar.
Si miras a continuación, tengo el código que funciona para un artículo. La div aparece cuando pasas el cursor sobre la primera imagen. Esta es la estructura que necesito ya que la cartera real tiene esta estructura básica. Solo necesito el código para que funcione para los otros dos. Habrá múltiples overs flotantes en el sitio en vivo.
<!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>
Si alguien pudiera mostrarme cómo hacer que cada uno trabaje independientemente, sería genial.
Supongo que un atributo rel como lightbox?
Me complace darle a cada imagen un id / rel por separado. Simplemente no quiero replicar el CSS.
Espero que tenga sentido :)
OK, entonces lo he actualizado pero todavía no funciona. Puedo ver lo que está sucediendo, pero no estoy seguro de la sintaxis exacta para que funcione.
Aquí está mi nuevo código:
<!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>
Creo que estoy cerca porque la pseudo lógica tiene sentido, pero aún no funciona.
Aclamaciones
Robar
Aquí tienes: http://jsfiddle.net/Mm66A/13/
Por favor, no use los campos ID para nombrar cosas "caja, caja, caja", use la Clase de "caja" para decir que cada artículo es de tipo "caja". Puede darle a cada casilla una ID ÚNICA.
Dependiendo de los navegadores a los que apunte, no necesita jQuery en absoluto . Si tiene que dirigirse a IE y no puede sufrir el cambio inmediato en lugar de la transición, podría comentar de manera condicional una referencia a un Javascript para él como lo han mencionado los otros pósters.
No puede tener más de un elemento con la misma id en html válido. Cambie cada id a class y cambie sus selectores de jquery de $(''#box'') y $(''#boxover'') a $(''.box'') y $(''.boxover'') y esto debería funcionar para usted. .
Podrías hacerlo:
<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);
}
violín aquí http://jsfiddle.net/rynma/
Básicamente debes usar classes lugar de ids porque id debe ser único y debes pasar un context al selector de jquery para restringir la selección al contexto (yo uso this )
Primero: no use la misma id para todos sus a y s div . Una identificación es un identificador único de un elemento, para "grupos" de elementos existe el atributo de class .
Para obtener el cuadro correspondiente para mostrar / ocultar, use los selectores avanzados de jquery, tratando de obtener el cuadro que está directamente antes del elemento fijo.
Yo le daría a cada una una etiqueta con una identificación única, y le doy a la casilla de verificación un id de ''over_'' + id_of_box_link y cambio el id = box a class = box, luego puede aplicar el vuelo estacionario haciendo esto:
no puedes tener identificaciones duplicadas
<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);
}
);