Question

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

当您将鼠标悬停在“在线”div上时，会出现一个新的div“online-hover”。 “在线”是默认的背景图像，然后新的div“在线悬停”应该在新的背景图像上淡入。我有HTML＆amp; 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()来阻止任何先前排队的动画运行，并在频繁悬停时更改正常行为。

JS fadeIn，fadeOut麻烦

1 个答案: