title: Jquery mouse one event with mouseover (fadein and fadeout)
body: <p>So i'm trying to make the div <strong>content1</strong> fadein when I go with my mouse over the div <strong>logo1</strong>, <strong>content1</strong> should fadeout when my mouse isn't over <strong>logo1</strong> oh and the content div's have visibility: hidden on the css.
  Same goes for logo2 3 and 4</p>
  
  <p>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)</p>
  
  <pre><code>$(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');
   });
  </code></pre>
  
  <p>what's wrong with my code? is there an easier way to do this? can it be done with the one event?</p>
  
  <p>EDIT:</p>
  
  <p>here's the HTML Tegeril</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/main.css" /&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;script type='text/javascript' src='js/jquery.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='js/mouseover.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div class="logo"&gt;&lt;/div&gt;
          &lt;div class="stripes"&gt;&lt;/div&gt;
          &lt;div class="button_info"&gt;&lt;/div&gt;
          &lt;div class="button_contact"&gt;&lt;/div&gt;
          &lt;div class="logo1"&gt;&lt;/div&gt;
          &lt;div class="logo2"&gt;&lt;/div&gt;
          &lt;div class="logo3"&gt;&lt;/div&gt;
          &lt;div class="logo4"&gt;&lt;/div&gt;
          &lt;div class="content1"&gt;&lt;/div&gt;
          &lt;div class="content2"&gt;&lt;/div&gt;
          &lt;div class="content3"&gt;&lt;/div&gt;
          &lt;div class="content4"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the javascript bit</p>
  
  <pre><code>$(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");
  });
  });
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>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;
  
  }
  </code></pre>