JS淡入，淡出麻烦

Question

I have a pure CSS rollover that I'm trying to add a smooth transition/fade effect to and I can't seem to get it to go.

When you hover over the div "online", a new div "online-hover" appears. "Online" is the default with a background image, then the new div "online-hover" should fade in on top with a new background image. I have the HTML & CSS working, but now I'm trying to add JS to make it look pretty. Example:

<div id="sidebar">
  <div class="steps online">
<div class="steps-hover online-hover"></div>    
  </div>
</div>

And the CSS

.steps{
float: left;
margin: 0;
padding: 0;
display: block;
width: 240px;
text-align: center;
height: 234px;
cursor: pointer;
 } 
.online{
background: url("images/applyonline.jpg") top left no-repeat;
}
.online-hover{
background: url("images/online-hover.jpg") top left no-repeat;
}
.steps-hover{
display: none;
}
div.online:hover div.online-hover {
margin: 0;
padding: 0;
width: 960px;
text-align: center;
height: 180px;
position: absolute; 
top: 234px;
display: block;
left: 0;
z-index: 3;
right: 0px;
cursor: auto;
}

And from following examples in other posts, I attempted the following JS

<script type='text/javascript'>
$(document).ready(function()
{    
$("div.online").hover(
  function () {
    $("div.online-hover").fadeIn('slow');
  }, 
  function () {
    $("div.online-hover").fadeOut('slow');
  }
);
});​

</script>

But it's not working. What did I do wrong? I'm so not good at JS, so feel free to dummy it down for me!

Answer 1

You have an illegal char at the end of document ready closing braces remove it. It is better seen in fiddle .

$(document).ready(function()
{    
$("div.online").hover(
  function () {
    $("div.online-hover").stop(true, true, true).fadeIn('slow');
  }, 
  function () {
    $("div.online-hover").stop(true, true, true).fadeOut('slow');
  }
);
});​ //<-- here

Also use .stop() to prevent any previous queued up animation from running and changing the normal behavior when you make frequent hovers.