JS fadeIn, fadeOut troubles

Question

我有一个纯CSS滚动，我正试图为其添加平滑过渡/淡入效果，但我似乎无法实现。

当您将鼠标悬停在div"online"上时，会出现一个新的div"onlinehover"。"在线"是默认的背景图像，然后新的div"在线悬停"应该会以新的背景图像出现在顶部。我有HTML&CSS正在工作，但现在我正在尝试添加JS以使其看起来很漂亮。示例：

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

和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;
}

从其他帖子中的以下例子中，我尝试了以下JS

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

但它不起作用。我做错了什么？我太不擅长JS了，所以请随意为我模仿一下！

Answer 1

您在文档末尾有一个非法的字符，请用大括号将其删除。这在fidd中可以更好地看到。

$(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

还可以使用.stop()来防止任何以前排队的动画在频繁悬停时运行和更改正常行为。