Jquery mouse a un evento con mouseover (fadein e dissolvenza)
https://stackoverflow.com/questions/1911719
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Così sto cercando di rendere il div content1 fadein quando vado con il mio mouse sopra il div logo1 , content1 dovrebbe fadeout quando il mio mouse non è finita logo1 oh ed il contenuto div sono visibility: hidden sul css. Lo stesso vale per logo2 3 e 4
Ho provato questo codice, ma non ha funzionato per me (non ho aggiunto fadeout perché non so dove inserirlo dopo che ho usato 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');
});
cosa c'è di sbagliato con il mio codice? C'è un modo più semplice per farlo? può essere fatto con l'unico evento?
EDIT:
ecco la Tegeril HTML
<!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>
il 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");
});
});
ed il 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;
}
Soluzione
Se si dispone di classi come spiegato nel commento di cui sopra, è necessario mettere un '' davanti a loro invece di un #. # Significa id,. Classe significa.
$(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");
}
});
});
});
Sicuramente replica di codice, e non testati, ma credo che questo farà quello che vuoi. Su presso uno qualsiasi di questi elementi, ci vorrà l'oggetto in questione, dividere le classi che di voce ad un array, scorrere per una classe come logo, poi fade in / out il contenuto numerata appropriata affettando il numero al largo della fine del il nome della classe logo.
Modifica sulla base di commento qui sotto:
Se vuoi più semplice, che si tradurrà in replica codice aggiuntivo, è sufficiente:
$(".logo1").hover(function() {
$(".content1").fadeIn("slow");
}, function() {
$(".content1").fadeOut("slow");
});
... per ognuno dei vostri abbinamenti. E, naturalmente, metterlo dentro $ (document.ready (function () {...});
Modifica in base a seconda commento qui sotto:
Ok, ho appena fatto un test per provare tutti i tuoi file in locale e il problema non è il codice JavaScript, è il CSS / HTML. Prova ad aggiungere questo alla tua CSS:
#container div {
border: solid 1px #000000;
}
Troverete che in Safari che questi div non esistono da nessuna parte perché non sono posizionati correttamente per Webkit, mentre in Firefox, che fanno vedere.
E 'anche possibile che il "ritardo" che stai vedendo è un problema in cui tutti i div con classe di content1-4 sono già visibili e non si può iniziare a vedere l'effetto fino a quando non si dissolvono prima e poi di nuovo in. Sei consiglia di impostare la loro CSS display: none; e fadeIn di JQuery li renderà visibile.
Altri suggerimenti
Probabilmente si sta cercando per la funzione di passaggio del mouse.
$(document).ready(function(){
$("#logo1, #logo2, #logo3, #logo4").hover(function(){
//perform fadeIn here
}, function(){
//perform fadeOut here
});
});
In base a quanto spiegato Vincent Ho questo codice
$(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");
});
});
Tuttavia non vedo alcun collegamento tra il passaggio del mouse sul logo e il fadein e dissolvenza di ogni contenuto, che sarebbe in questo modo:
logo1 hover fadein content1 e dissolvenza content1 quando l'isnt mouse sopra logo1
logo2 hover fadein content2 e dissolvenza content2 quando l'isnt mouse sopra logo2
logo3 hover fadein content3 e dissolvenza content3 quando l'isnt mouse sopra logo3
logo4 hover fadein content4 e dissolvenza content4 quando l'isnt mouse sopra logo4
