JQuery Mouse One Event com MouseOver (Fadein e Fadeout)
https://stackoverflow.com/questions/1911719
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Então, estou tentando fazer o div Content1 Fadein quando eu vou com meu mouse sobre a div logo1, Content1 deve desaparecer quando meu mouse não acabou logo1 Ah, e os Divs de conteúdo têm visibilidade: escondidos no CSS. O mesmo vale para o logo2 3 e 4
Eu tentei esse código, mas não funcionou para mim (não adicionei o Fadeout porque não sei onde adicioná -lo depois de usar 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');
});
O que há de errado com meu código? Há uma maneira mais fácil de fazer isso? Pode ser feito com o único evento?
EDITAR:
Aqui está o 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>
o 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");
});
});
e o 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;
}
Solução
Se você tem aulas, conforme explicado no comentário acima, deve colocar um ''. ' diante deles em vez de um #. # significa ID ,. significa 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");
}
});
});
});
Definitivamente, a replicação do código, e não testada, mas acho que isso fará o que você deseja. Segundo o Hover de qualquer um desses itens, ele levará o item em questão, dividirá as aulas desse item em uma matriz, itera através dele para uma aula, incluindo logotipo e depois desbotará o conteúdo numerado apropriado, cortando o número do final do final do o nome da classe do logotipo.
Editar com base no comentário abaixo:
Se você quiser mais simples, o que resultará em replicação adicional de código, você simplesmente precisa:
$(".logo1").hover(function() {
$(".content1").fadeIn("slow");
}, function() {
$(".content1").fadeOut("slow");
});
... para cada um de seus pares. E, claro, coloque -o dentro de $ (document.ready (function () {...});
Editar com base no segundo comentário abaixo:
Ok, acabei de fazer um teste experimentando todos os seus arquivos localmente e o problema não é o JavaScript, é o CSS/HTML. Tente adicionar isso ao seu CSS:
#container div {
border: solid 1px #000000;
}
Você descobrirá que, no Safari, esses divs não existem em nenhum lugar porque não estão posicionados corretamente no webkit, enquanto no Firefox eles aparecem.
Também é possível que o "atraso" que você está vendo seja um problema em que todos os divs com classe conteúdo1-4 já estão visíveis e você não pode começar a ver o efeito até que eles desaparecem e depois voltem. Você está deseja definir seus CSs para exibir: nenhum; E o Fadein de JQuery os tornará visíveis.
Outras dicas
Você provavelmente está procurando a função pairar.
$(document).ready(function(){
$("#logo1, #logo2, #logo3, #logo4").hover(function(){
//perform fadeIn here
}, function(){
//perform fadeOut here
});
});
Com base no que Vincent explicou que tenho 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");
});
});
No entanto, eu não vejo nenhuma conexão entre o mouse no logotipo e o Fadein e o Fadeout de cada conteúdo, o que seria assim:
Logo1 Hover Fadein Content1 e Fadeout Content1 Quando o mouse não está sobre o logotipo1
Logo2 Hover Fadein Content2 e Fadeout Content2 Quando o mouse não está sobre o logo2
Logo3 Hover Fadein Content3 e Fadeout Content3 Quando o mouse não está sobre o logo3
Logo4 Hover Fadein Content4 e Fadeout Content4 Quando o mouse não está sobre o logo4
