JQUERY MOUSE ONE EVENT avec Mouseover (Fadein et Fadeout)
https://stackoverflow.com/questions/1911719
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Alors j'essaye de faire le div contenu1 fadein quand je vais avec ma souris sur la div logo1, contenu1 devrait s'estomper quand ma souris n'est pas terminée logo1 Oh et le contenu que les div ont la visibilité: cachée sur le CSS. Il en va de même pour le logo2 3 et 4
J'ai essayé ce code mais cela n'a pas fonctionné pour moi (je n'ai pas ajouté Fadeout parce que je ne sais pas où l'ajouter après avoir utilisé 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'est ce qui ne va pas avec mon code? Y a-t-il un moyen plus facile de le faire? Cela peut-il être fait avec le seul événement?
ÉDITER:
voici le 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>
le bit 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");
});
});
Et le 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;
}
La solution
Si vous avez des cours comme expliqué dans le commentaire ci-dessus, vous devez mettre un '.' avant eux au lieu d'un #. # signifie id ,. signifie classe.
$(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");
}
});
});
});
Certainement la réplication du code et non testé, mais je pense que cela fera ce que vous voulez. En survolant l'un de ces articles, il faudra à l'article en question, divisera les cours de cet article à un tableau, parcourez-le pour un cours comprenant le logo, puis s'estompe dans / out le contenu numéroté approprié en découpant le numéro de la fin de le nom de classe de logo.
Modifier en fonction du commentaire ci-dessous:
Si vous le souhaitez plus simple, ce qui entraînera une réplication de code supplémentaire, vous avez simplement besoin:
$(".logo1").hover(function() {
$(".content1").fadeIn("slow");
}, function() {
$(".content1").fadeOut("slow");
});
... pour chacun de vos paires. Et bien sûr, mettez-le à l'intérieur $ (document.ready (function () {...});
Modifier en fonction du deuxième commentaire ci-dessous:
OK, je viens de faire un test en essayant tous vos fichiers localement et le problème n'est pas le javascript, c'est le CSS / HTML. Essayez d'ajouter cela à votre CSS:
#container div {
border: solid 1px #000000;
}
Vous constaterez que dans Safari, ces divs n'existent nulle part parce qu'ils ne sont pas positionnés correctement pour Webkit, alors que dans Firefox, ils apparaissent.
Il est également possible que le "retard" que vous voyez soit un problème dans lequel tous les divs avec le contenu de la classe1-4 sont déjà visibles et que vous ne pouvez pas commencer à voir l'effet avant qu'ils ne disparaissent plus puis de retour. Vous êtes. veulent définir leur CSS pour afficher: aucun; Et Fadein de JQuery les rendra visibles.
Autres conseils
Vous cherchez probablement la fonction de survol.
$(document).ready(function(){
$("#logo1, #logo2, #logo3, #logo4").hover(function(){
//perform fadeIn here
}, function(){
//perform fadeOut here
});
});
Sur la base de ce que Vincent a expliqué que j'ai ce code
$(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");
});
});
Cependant, je ne vois aucun lien entre le volant sur le logo et le fadein et le fondu de chaque contenu, ce qui ressemblerait à ceci:
LOGO1 Hover Fadein Content1 et Fadeout Content1 Lorsque la souris n'est pas sur le logo1
LOGO2 Hover Fadein Content2 et Fadeout Content2 Lorsque la souris n'est pas sur le logo2
LOGO3 Hover Fadein Content3 et Fadeout Content3 Lorsque la souris n'est pas sur le logo3
LOGO4 Hover Fadein Content4 et Fadeout Content4 Lorsque la souris n'est pas sur le logo4
