jQuery 마우스 마우스 오버 (Fadein and Fadeout)와 함께 한 이벤트
https://stackoverflow.com/questions/1911719
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
그래서 나는 div를 만들려고 노력하고 있습니다 내용 1 내가 div 위로 마우스와 함께 갈 때 fadein 로고 1, 내용 1 마우스가 끝나지 않았을 때 사라져야합니다 로고 1 아, 그리고 컨텐츠 div에는 가시성이 있습니다 : CSS에 숨겨져 있습니다. 로고 2 3 및 4에 대해서도 마찬가지입니다
나는이 코드를 시도했지만 나에게는 효과가 없었습니다 (Fadein을 사용한 후에 추가 할 곳을 모르기 때문에 Fadeout을 추가하지 않았습니다).
$(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');
});
내 코드에 무슨 문제가 있습니까? 더 쉬운 방법이 있습니까? 하나의 이벤트로 할 수 있습니까?
편집하다:
여기 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>
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");
});
});
그리고 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;
}
해결책
위의 의견에 설명 된 수업이 있으면 ''를 넣어야합니다. ' #대신 그들 앞에. # ID를 나타냅니다. 수업을 의미합니다.
$(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");
}
});
});
});
확실히 코드 복제, 테스트되지 않았지만 이것이 당신이 원하는 것을 할 것이라고 생각합니다. 해당 항목을 호버 할 때 해당 항목이 문제가 발생하여 해당 항목의 클래스를 배열로 나누고 로고를 포함한 클래스를 위해 반복 한 다음 숫자를 끝내고 적절한 번호가 매겨진 컨텐츠를 페이드/배출합니다. 로고 클래스 이름.
아래 주석을 기반으로 편집 :
더 간단하게 원하면 추가 코드 복제가 발생하면 다음과 같이됩니다.
$(".logo1").hover(function() {
$(".content1").fadeIn("slow");
}, function() {
$(".content1").fadeOut("slow");
});
... 각 페어링에 대해. 물론 $ (document.ready (function () {...})에 넣습니다.
아래 두 번째 주석을 기반으로 편집하십시오.
좋아, 방금 모든 파일을 로컬로 시험해 보면서 테스트를 수행했는데 문제는 JavaScript가 아니라 CSS/HTML입니다. CSS에 이것을 추가 해보십시오.
#container div {
border: solid 1px #000000;
}
Safari에서는 해당 Div가 WebKit에 제대로 배치되지 않기 때문에 Divs가 어디에도 존재하지 않는다는 것을 알게 될 것입니다. 반면 Firefox에서는 나타납니다.
당신이보고있는 "지연"이 클래스 내용 1-4가있는 모든 div가 이미 볼 수있는 문제 일 수도 있고 그들이 처음으로 사라질 때까지 효과를보기 시작할 수없는 문제 일 수도 있습니다. CSS를 표시하도록 설정하고 싶습니다 : 없음; 그리고 jQuery의 페이드 인은 그들을 보게 할 것입니다.
다른 팁
당신은 아마도 호버 기능을 찾고있을 것입니다.
$(document).ready(function(){
$("#logo1, #logo2, #logo3, #logo4").hover(function(){
//perform fadeIn here
}, function(){
//perform fadeOut here
});
});
Vincent가 설명한 내용을 바탕 으로이 코드를 얻었습니다
$(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");
});
});
그러나 나는 로고의 호버와 각 콘텐츠의 페이드 아웃과 페이드 아웃 사이의 연결이 보이지 않습니다. 이것은 다음과 같습니다.
logo1 hover fadein content1 및 fadeout content1 마우스가 logo1 이상이 아닌 경우
logo2 hover fadein content2 및 fadeout content2 마우스가 logo2 이상이 아닌 경우
logo3 hover fadein content3 및 fadeout content3 마우스가 logo3 이상이되지 않을 때
logo4 hover fadein content4 및 fadeout content4 마우스가 logo4 이상이 아닌 경우 4
