2

我有一个纯 CSS 翻转，我试图添加一个平滑的过渡/淡入淡出效果，但我似乎无法让它去。

当您将鼠标悬停在 div "online" 上时，会出现一个新的 div "online-hover"。“在线”是带有背景图像的默认设置，然后新的 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，所以请随意为我做傻事！

4

1 回答 1

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()防止任何先前排队的动画运行并在您频繁悬停时更改正常行为。

于 2013-07-11T21:05:30.180 回答