JQuery Mouse One Event con Mouseover (Fadein y Fadeout)
https://stackoverflow.com/questions/1911719
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Así que estoy tratando de hacer el Div contenido1 Fadein cuando voy con mi ratón sobre el div logotipo1, contenido1 Debería desvanecerse cuando mi ratón no haya terminado logotipo1 Ah, y los Div de Contenido tienen visibilidad: oculto en el CSS. Lo mismo ocurre con el logo2 3 y 4
He probado este código pero no funcionó para mí (no agregué Fadadout porque no sé dónde agregarlo después de haber usado Fadein)
$(document).ready(function(){
$("logo1, logo2, logo3, logo4").one('mouseover', function(){
$("logo1").fadeIn({"content1"}, "slow");
$("logo2").fadeIn({"content2"}, "slow");
$("logo3").fadeIn({"content3"}, "slow");
$("logo4").fadeIn({"content4"}, "slow");
$("content1, content2, content3, content4").mouseout('fadeout');
});
¿Qué pasa con mi código? ¿Hay una manera más fácil de hacer esto? ¿Se puede hacer con el único evento?
EDITAR:
Aquí está el html tegeril
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>test</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/mouseover.js'></script>
</head>
<body>
<div id="container">
<div class="logo"></div>
<div class="stripes"></div>
<div class="button_info"></div>
<div class="button_contact"></div>
<div class="logo1"></div>
<div class="logo2"></div>
<div class="logo3"></div>
<div class="logo4"></div>
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
</div>
</body>
</html>
el bit de JavaScript
$(document).ready(function(){
$(".logo1").hover(function() {
$(".content1").fadeIn("slow");
}, function() {
$(".content1").fadeOut("slow");
});
$(".logo2").hover(function() {
$(".content2").fadeIn("slow");
}, function() {
$(".content2").fadeOut("slow");
});
$(".logo3").hover(function() {
$(".content3").fadeIn("slow");
}, function() {
$(".content3").fadeOut("slow");
});
$(".logo4").hover(function() {
$(".content4").fadeIn("slow");
}, function() {
$(".content4").fadeOut("slow");
});
});
y el CSS
body{
margin: 0;
padding: 0;
text-align: center;
background-image:url(../images/bg.png);
background-repeat:repeat;
}
#container{
background-image:url(../images/bg.png);
text-align: left;
margin: auto;
width: 939px;
height: 570px;
top:41px;
background-repeat:repeat;
position:relative;
}
.logo{
background-image:url(../images/logo.png);
width: 345px;
height: 82px;
position:absolute;
}
.stripes{
background-image:url(../images/stripes.png);
background-repeat:repeat-x;
width:939px;
height:5px;
position:absolute;
top:97px;
left:0px;
}
.button_info{
background-image:url(../images/button_info.png);
width: 98px;
height: 31px;
position:absolute;
top:114px;
left: 0px;
}
.button_contact{
background-image:url(../images/button_contact.png);
width: 211px;
height: 35px;
position:absolute;
top:114px;
right:0px;
}
.logo1{
background-image:url(../images/logo_blue.png);
background-repeat:repeat;
width: 231px;
height: 91px;
position:absolute;
bottom: 322px;
}
.logo2{
background-image:url(../images/logo_green.png);
width: 231px;
height: 91px;
position:absolute;
bottom: 226px;
}
.logo3{
background-image:url(../images/logo_yellow.png);
width: 231px;
height: 91px;
position:absolute;
bottom: 130px;
}
.logo4{
background-image:url(../images/logo_red.png);
width: 231px;
height: 91px;
position:absolute;
bottom: 34px;
}
.content1{
background-image:url(../images/logo_blue.png);
width: 703px;
height: 379px;
position:absolute;
left:236px;
bottom:34px;
}
.content2{
background-image:url(../images/logo_green.png);
width: 703px;
height: 379px;
position:absolute;
left:236px;
bottom:34px;
}
.content3{
background-image:url(../images/logo_yellow.png);
width: 703px;
height: 379px;
position:absolute;
left:236px;
bottom:34px;
}
.content4{
background-image:url(../images/logo_red.png);
width: 703px;
height: 379px;
position:absolute;
left:236px;
bottom:34px;
}
Solución
Si tiene clases como se explica en el comentario anterior, debe poner un '.' ante ellos en lugar de un #. # significa ID ,. Significa la clase.
$(document.ready(function() {
$(".logo1, .logo2, .logo3, .logo4").hover(function() {
var arrayOfClasses = $(this).attr('class').split(' ');
$(arrayOfClasses).each(function() {
if (this.indexOf("logo" > -1) {
$(".content" + this.slice(this.indexOf("logo") + 4)).fadeIn("slow");
}
});
}, function() {
var arrayOfClasses = $(this).attr('class').split(' ');
$(arrayOfClasses).each(function() {
if (this.indexOf("logo" > -1) {
$(".content" + this.slice(this.indexOf("logo") + 4)).fadeOut("slow");
}
});
});
});
Definitivamente, la replicación del código, y no probada, pero creo que esto hará lo que quieras. Al pasar el flujo de cualquiera de esos elementos, tomará el elemento en cuestión, dividirá las clases de ese elemento en una matriz, iterar a través de él para una clase que incluye el logotipo, luego desvanecer el contenido numerado apropiado cortando el número del final de el nombre de la clase de logotipo.
Editar basado en el comentario a continuación:
Si lo desea más simple, lo que dará como resultado una replicación de código adicional, simplemente necesita:
$(".logo1").hover(function() {
$(".content1").fadeIn("slow");
}, function() {
$(".content1").fadeOut("slow");
});
... para cada uno de tus parejas. Y, por supuesto, póngalo dentro de $ (document.ready (function () {...});
Editar basado en el segundo comentario a continuación:
Ok, acabo de hacer una prueba probando todos sus archivos localmente y el problema no es el JavaScript, es el CSS/HTML. Intente agregar esto a su CSS:
#container div {
border: solid 1px #000000;
}
Descubrirá que en Safari no existen en ningún lado porque no están posicionados correctamente para WebKit, mientras que en Firefox, se presentan.
También es posible que el "retraso" que está viendo es un problema en el que todos los divs con el contenido de clase1-4 ya son visibles y no puede comenzar a ver el efecto hasta que se desvanecen y luego vuelvan a entrar. Desea establecer su CSS para mostrar: Ninguno; Y Fadein de JQuery los hará visibles.
Otros consejos
Probablemente esté buscando la función de desplazamiento.
$(document).ready(function(){
$("#logo1, #logo2, #logo3, #logo4").hover(function(){
//perform fadeIn here
}, function(){
//perform fadeOut here
});
});
Basado en lo que Vincent explicó que tengo este código
$(document).ready(function(){
$(".logo1, .logo2, .logo3, .logo4").hover(function(){
//perform fadeIn here
$('.content1').fadeIn("slow");
$('.content2').fadeIn("slow");
$('.content3').fadeIn("slow");
$('.content4').fadeIn("slow");
}, function(){
//perform fadeOut here
$('.content1').fadeOut("slow");
$('.content2').fadeOut("slow");
$('.content3').fadeOut("slow");
$('.content4').fadeOut("slow");
});
});
Sin embargo, no veo ninguna conexión entre el flotador en el logotipo y el desvanecimiento y el desvanecimiento de cada contenido, que sería así:
LOGO1 Hover Fadein Content1 y FadeOut Content1 Cuando el mouse no está a través del logotipo1
LOGO2 Hover Fadein Content2 y FadeOut Content2 cuando el mouse no está a través del logo2
LOGO3 Hover Fadein Content3 y FadeOut Content3 Cuando el mouse no está a través del logotipo3
LOGO4 Hover Fadein Content4 y FadeOut Content4 cuando el mouse no está a través del logotipo4
