JQuery Mouse One Event с Mouseover (Fadein и Fadeout)
https://stackoverflow.com/questions/1911719
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Итак, я пытаюсь сделать дивинг Контент1 Fadein, когда я иду с мышью над Div логотип1, Контент1 должен исчезнуть, когда моя мышь не закончится логотип1 О, и контент Div имеет видимость: скрыта на CSS. То же самое касается Logo2 3 и 4
Я попробовал этот код, но он не сработал для меня (я не добавил Fadeout, потому что не знаю, где добавить его после того, как я использовал 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');
});
Что не так с моим кодом? Есть ли более простой способ сделать это? Можно ли это сделать с одним событием?
РЕДАКТИРОВАТЬ:
Вот 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 Bit
$(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 вы обнаружите, что эти DOV не существуют нигде, потому что они не расположены должным образом для Webkit, тогда как в Firefox они появляются.
Также возможно, что «задержка», которую вы видите, является проблемой, при которой все DIV с Class Content1-4 уже видны, и вы не можете начать видеть эффект, пока они сначала исчезнем, а затем вернетесь. Вы. Вы. хочу настроить их CSS для отображения: нет; И Fadein Jquery сделает их видимыми.
Другие советы
Вы, вероятно, ищете функцию падения.
$(document).ready(function(){
$("#logo1, #logo2, #logo3, #logo4").hover(function(){
//perform fadeIn here
}, function(){
//perform fadeOut here
});
});
Исходя из того, что объяснил Винсент, у меня есть этот код
$(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");
});
});
Однако я не вижу никакой связи между наведением на логотипе и Fadein и Fadeout каждого контента, что будет похоже на это:
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
