Jquery mouse one event with mouseover (fadein and fadeout)
https://stackoverflow.com/questions/1911719
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
So i'm trying to make the div content1 fadein when I go with my mouse over the div logo1, content1 should fadeout when my mouse isn't over logo1 oh and the content div's have visibility: hidden on the css. Same goes for logo2 3 and 4
I've tried this code but it didn't work for me (I didn't add fadeout because I dont know where to add it after i've used 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');
});
what's wrong with my code? is there an easier way to do this? can it be done with the one event?
EDIT:
here's the 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>
the 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");
});
});
and the 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;
}
Solution
If you have classes as explained in the comment above, you must put a '.' before them instead of a #. # signifies id, . signifies class.
$(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");
}
});
});
});
Definitely code replication, and not tested, but I think this will do what you want. On hover of any of those items, it will take the item in question, split that item's classes to an array, iterate through it for a class including logo, then fade in/out the appropriate numbered content by slicing the number off the end of the logo class name.
Edit based on comment below:
If you want it simpler, which will result in additional code replication, you simply need:
$(".logo1").hover(function() {
$(".content1").fadeIn("slow");
}, function() {
$(".content1").fadeOut("slow");
});
...for each of your pairings. And of course, put it inside $(document.ready(function() {...});
Edit based on second comment below:
Ok, I just did a test by trying out all of your files locally and the problem is not the JavaScript, it's the CSS/HTML. Try adding this to your css:
#container div {
border: solid 1px #000000;
}
You'll find that in Safari that those divs don't exist anywhere because they're not positioned properly for Webkit, whereas in Firefox, they do show up.
It's also possible that the "delay" you're seeing is a problem wherein all of the divs with class content1-4 are already visible and you can't start seeing the effect until they first fade out and then back in. You're want to set their CSS to display: none; and JQuery's fadeIn will make them visible.
OTHER TIPS
You are probably looking for the hover function.
$(document).ready(function(){
$("#logo1, #logo2, #logo3, #logo4").hover(function(){
//perform fadeIn here
}, function(){
//perform fadeOut here
});
});
Based on what vincent explained I've got this 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");
});
});
However I dont see any connection between the hover on the logo and the fadein and fadeout of each content, which would be like this:
logo1 hover fadein content1 and fadeout content1 when the mouse isnt over logo1
logo2 hover fadein content2 and fadeout content2 when the mouse isnt over logo2
logo3 hover fadein content3 and fadeout content3 when the mouse isnt over logo3
logo4 hover fadein content4 and fadeout content4 when the mouse isnt over logo4
