javascript - JS fadeIn,fadeOut 烦恼

Question

我有一个纯 CSS 翻转，我正在尝试向其添加平滑的过渡/淡入淡出效果，但我似乎无法让它运行。

当您将鼠标悬停在“在线”div 上时，会出现一个新的“在线悬停”div。 “Online”是带有背景图片的默认设置，然后新的 div“online-hover”应该会淡入顶部并带有新的背景图片。我的 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

文档末尾有一个非法字符，准备好右大括号将其删除。最好在 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

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