JQuery Mouse One Event mit Mouseover (Fadein und Fadeout)
https://stackoverflow.com/questions/1911719
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Also versuche ich das Div zu machen Content1 Fadein, wenn ich mit meiner Maus über die DIV gehe Logo1, Content1 sollte ausblenden, wenn meine Maus nicht vorbei ist Logo1 Oh und die Inhaltsdivs haben Sichtbarkeit: Versteckt auf dem CSS. Gleiches gilt für Logo2 3 und 4
Ich habe diesen Code ausprobiert, aber es hat bei mir nicht funktioniert (ich habe Fadeout nicht hinzugefügt, weil ich nicht weiß, wo ich ihn hinzufügen soll, nachdem ich Fadein verwendet habe)
$(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');
});
Was ist los mit meinem Code? Gibt es eine einfachere Möglichkeit, dies zu tun? Kann es mit dem einen Ereignis getan werden?
BEARBEITEN:
Hier ist der 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>
Das 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");
});
});
und das 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;
}
Lösung
Wenn Sie Klassen haben, wie im obigen Kommentar erläutert, müssen Sie ein '.' vor ihnen statt einer #. # bedeutet id ,. bedeutet Klasse.
$(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");
}
});
});
});
Auf jeden Fall Code Replikation und nicht getestet, aber ich denke, das wird das tun, was Sie wollen. Wenn Sie einen dieser Elemente schweben, wird der betreffende Element in Frage gestellt, die Klassen dieses Elements in ein Array aufgeteilt, ihn für eine Klasse einschließlich Logo durchführen und dann den entsprechenden nummerierten Inhalt ein-/ausblicken, indem Sie die Nummer am Ende von Ende schneiden Der Name der Logo -Klasse.
Basierend auf dem Kommentar unten bearbeiten:
Wenn Sie es einfacher wünschen, was zu einer zusätzlichen Codereplikation führt, benötigen Sie einfach:
$(".logo1").hover(function() {
$(".content1").fadeIn("slow");
}, function() {
$(".content1").fadeOut("slow");
});
... für jedes Ihrer Paarungen. Und natürlich in $ (document.Ready (function () {...}) in $ (document.ready ();
Basierend auf dem zweiten Kommentar unten bearbeiten:
OK, ich habe gerade einen Test durchgeführt, indem ich alle Ihre Dateien lokal ausprobiert habe, und das Problem ist nicht das JavaScript, sondern das CSS/HTML. Fügen Sie dies Ihrem CSS hinzu:
#container div {
border: solid 1px #000000;
}
Sie werden feststellen, dass diese Divs in Safari nirgendwo existieren, weil sie nicht richtig für Webkit positioniert sind, während sie in Firefox auftauchen.
Es ist auch möglich, dass die "Verzögerung", die Sie sehen, ein Problem ist, bei dem alle DIVs mit Klasseninhalten1-4 bereits sichtbar sind und Sie den Effekt erst sehen können, wenn sie zuerst verblassen und dann wieder rein. Sie sind wieder ein. Ich möchte ihre CSS auf Anzeigen einstellen: keine; Und Jquerys Fadein wird sie sichtbar machen.
Andere Tipps
Sie suchen wahrscheinlich nach der Hover -Funktion.
$(document).ready(function(){
$("#logo1, #logo2, #logo3, #logo4").hover(function(){
//perform fadeIn here
}, function(){
//perform fadeOut here
});
});
Basierend auf dem, was Vincent erklärt habe, habe ich diesen Code
$(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");
});
});
Ich sehe jedoch keine Verbindung zwischen dem Schweber auf dem Logo und dem Fadein und dem Ausblenden jedes Inhalts, was so wäre:
Logo1 Hover Fadein Content1 und Fadeout Content1 Wenn die Maus nicht über Logo1 ist
Logo2 Hover Fadein Content2 und Fadeout Content2 Wenn die Maus nicht über Logo2 ist
Logo3 Hover Fadein Content3 und Fadeout Content3 Wenn die Maus nicht über Logo3 ist
Logo4 Hover Fadein Content4 und Fadeout Content4, wenn die Maus nicht über Logo4 ist
