tags:

views:

818

answers:

3
+1  Q: 

Jquery mouse one event with mouseover (fadein and fadeout)

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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;

}
+3  A: 

You are probably looking for the hover function.

 $(document).ready(function(){ 
     $("#logo1, #logo2, #logo3, #logo4").hover(function(){
              //perform fadeIn here
      }, function(){
           //perform fadeOut here
      });
  });
Vincent Ramdhanie  2009-12-16 01:39:46
how do I perform the fadein for each content? do I have to make a line for each fadein? for example for content one to fadein when mouseovering logo1 it would be something like $("logo1").fadeIn({"content1"}, "slow"); and for fadeout $("logo1").fadeOut({"content1"}, "slow"); or am I wrong?
Bruno  2009-12-16 02:02:32
If you want content1 to fadeIn then you use $('#content1').fadeIn("slow");
Vincent Ramdhanie  2009-12-16 02:29:16
the code doesnt work, i tried it with and without the # infront of each div (which would only be used for divs with IDs right? I mean I'm not sure but I only got divs with classes)and how will it only affect one at the time? logo1 should only fade content1, logo2 only content2 and so on.
Bruno  2009-12-16 02:37:14
If your divs have classes then use .logo1 etc as the selector.
Vincent Ramdhanie  2009-12-16 10:56:50
+1  A: 

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.

Tegeril  2009-12-16 02:53:31
thank you for the explanation on ID and classes however i'm looking for something simpler... didn't get to work with arrays yet.
Bruno  2009-12-16 03:06:19
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() {...});
Tegeril  2009-12-16 03:10:16
Ooo, that formatted gross. Will edit my post.
Tegeril  2009-12-16 03:10:55
didn't work here, might it be the visibility:hidden I've got on each content CSS?
Bruno  2009-12-16 03:21:09
ok i got it to work (removed the visibility:hidden on all the contents) however when I first load the site and go with the mouse over the logo divs they dont make the effect, it takes a few seconds until it starts working (on all)
Bruno  2009-12-16 03:31:13
There is likely something still loading on the page. Essentially document.ready() waits for the entire Document Object Model to completely load before attempting to perform any actions so that you do not inadvertently gets nulls while looking for objects/elements that do not yet exist on the page. One potential cause of delay could be external scripts immediately preceding the closing body tag (for content rendering efficiency this is a good tactic, but not for getting the DOM ready in tandem with the visual elements of the page)
Tegeril  2009-12-16 03:38:27
so while experimenting I tried removing document.ready with no success and my external code is called after the external jquery sheet inside the head tag. can you give me any hints?
Bruno  2009-12-16 03:55:16
Well document.ready() needs to stay or you will end up with some errors in certain circumstances. Without all of the source code or a link to the page to see what's going on, I'm not sure I can provide anything more that is useful, sorry.
Tegeril  2009-12-16 04:02:28
ill add the html and css to the main question
Bruno  2009-12-16 04:38:19
There is nothing in there that I can see that would warrant the kind of initialization delay you're encountering :(
Tegeril  2009-12-16 05:20:05
well I just tested it on a few browsers and here's what I got: Firefox WORKING Opera NOT WORKING Safari NOT WORKING and i've also tried the live view from dreamweaver which is WORKING. Looks like only firefox is getting the code right, on the others it wont do anything, I've waited to see if the delay might be longer but nothing happend, the code doesn't work on opera and safari
Bruno  2009-12-16 06:06:45
See update in my post.
Tegeril  2009-12-16 06:20:01
holy **** you found out =) both the border AND the display none fixed all, I didnt know about the border thingy neither did I know that jQuery's fadeIN displays a display:none div (I thought it only works with mousehover heh..) well HUGE THANKS! next step ill try to learn my way trough the animate function, i'll try to add some basic animations to my header using this method http://css-tricks.com/jquery-robot/ if I get trouble with the hover on the content ill keep posting on this question =). Thanks again!
Bruno  2009-12-16 06:40:41
You're quite welcome, though I'd suggest a new question if the topic diverges enough because this chain is getting fairly lengthy :)
Tegeril  2009-12-16 06:50:55
A: 

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

Bruno  2009-12-16 03:16:08

related questions

Communicating between websites (using Javascript or ?)
Javascript Unit-testing?
How can I return a variable from a $.getJSON function
Is there an "exists" function for jQuery
Why do I receive a q[num] error when aborting a jQuery queue pipeline?
How do I fire an event when a iframe has finished loading in jQuery?
How to compare html entity with JQuery
Problems while submitting a UTF-8 form textarea with JQuery/AJAX
How do I get the coordinates of the caret in text boxes?
SimpleModal breaks ASP.Net Postbacks
How would you handle errors when using jQuery.ajax() ?
Where is the best jQuery "plugins" library on the web?
Where can I learn jQuery? Is it worth it?
Keeping key value pairs together in HTML <select/> with JQuery?
How to set encoding in .getJSON JQuery
What is a selector engine?
Escaping HTML strings with jQuery
jQuery AJAX vs. UpdatePanel
What's the best way to code a desktop application-like menu bar in Javascript?
Dynamic Alphabetical Navigation
Scrolling Overflowed DIVs with JavaScript
How do I add a pre tag inside a code tag with jQuery?
Graph visualization code in javascript?
Wrapping lists into columns
Interview Questions for an Intern