jQueryマウスマウスオーバー付き1つのイベント（フェデインとフェードアウト）
https://stackoverflow.com/questions/1911719
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
だから私はdivを作ろうとしています content1 私がマウスを持ってdivの上に行くときフェデイン logo1, content1 マウスが終わっていないときにフェードアウトする必要があります logo1 ああ、コンテンツDivには可視性があります：CSSに隠されています。 Logo2 3および4についても同じことが言えます
私はこのコードを試しましたが、それは私にとってはうまくいきませんでした（フェデアンを使用した後にどこに追加するかわからないのでフェードアウトを追加しませんでした）
$(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');
});
私のコードの何が問題になっていますか？これを行う簡単な方法はありますか？ 1つのイベントで行うことはできますか？
編集：
これが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（）{...}）内に入れます。
以下の2番目のコメントに基づいて編集します。
わかりました、私はあなたのすべてのファイルをローカルで試してみてテストしましたが、問題はJavaScriptではなく、CSS/HTMLです。これをCSSに追加してみてください：
#container div {
border: solid 1px #000000;
}
Safariでは、それらのdivはWebKitに適切に配置されていないため、どこにも存在しないことがわかりますが、Firefoxでは現れます。
また、あなたが見ている「遅延」は、クラスコンテンツを持つすべての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ホバーフェデインcontent1およびフェードアウトコンテンツ1マウスがobogo1にないとき
logo2ホバーフェデインcontent2およびフェードアウトコンテンツ2マウスがlogo2に及ばないとき
logo3ホバーフェデインcontent3およびフェードアウトコンテンツ3マウスがlogo3に及ばないとき
logo4ホバーフェデインcontent4およびフェードアウトコンテンツ4マウスがlogo4に及ばないとき
