Question

我最近在我的网站上添加了jQuery。将鼠标悬停在图像映射的各个部分上时，另一个div的背景将会改变，然后在鼠标离开图像映射时返回。

当背景改变时出现问题，它似乎出现故障并闪烁或闪烁。我试图在脚本中添加淡入淡出或动画但是失败了。有人可以建议一个很好的方法将其添加到代码中吗？

提前谢谢！

<script  type='text/javascript'>
$(function() {
  $(".slide2").hover(function() {
    $("#nav2").css("background", "url(img/second.png)")
  });
  $(".slide2").mouseout(function() {
    $("#nav2").css("background", "url(img/first.png)")
  });
  $(".slide3").hover(function() {
    $("#nav2").css("background", "url(img/third.png)")
  });
  $(".slide3").mouseout(function() {
    $("#nav2").css("background", "url(img/first.png)")
  })
});</script>

Answer 1

试试这个：

$(".slide2").mouseleave(function() {
   $("#nav2").css("background", "url(img/first.png)").fadeOut('slow');
});

Answer 2

我猜这个问题不是在脚本中，而是在加载图像时。您必须预先将图像缓存到Flash中，这是浏览器加载新图像所需的时间，因为它向服务器发出请求并下载图像。尝试使用这种技术：sprites（最佳解决方案）或者您可以将其插入页面末尾的html并添加隐藏图像的CSS，但您的浏览器将下载它（仅当您有巨大的图像加载）。

jQuery - 添加平滑动画，或淡入/淡出以使过渡更清晰

2 个答案: