javascript - 如何在 jQuery 中切换图像的淡入/淡出效果？-6ren

javascript - 如何在 jQuery 中切换图像的淡入/淡出效果？

转载作者：行者123 更新时间：2023-11-28 13:55:32

我已经将其工作到“几乎准备就绪”状态:http://jsbin.com/icuvit

有人可以告诉我如何解决这个问题，所以如果我悬停它就会变黑，而不是一开始就变黑。所以它从正常 -> 黑暗。

我要更改下面的 js 代码中的哪些内容？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>  
  <div id="mask-div"></div>
  <img id="test-img" src="http://www.google.ca/intl/en_ca/images/logo.gif">
<script>
$(document).ready( function() {
  $("#mask-div")
    .css({
      "position": "absolute",
      "width": 275,
      "height": 110,
      "background": "rgba(0, 0, 0, 0.5)",
      "display": "block"
    })
    .mouseover( function() {
         $(this).fadeOut("slow");
    })
  ;

  $("#test-img").mouseout( function() {
      $("#mask-div").fadeIn("slow");
  });

});
</script>  
</body>
</html>

非常感谢您的指点。

最佳答案

你需要稍微交换一下东西:

最初隐藏 mask
当鼠标悬停图像时，显示 mask (当 mask 尚未可见时，您将鼠标悬停在图像上)
当蒙版鼠标移出时，隐藏蒙版(当蒙版已经可见时，您将鼠标移出蒙版)

喜欢:http://jsbin.com/icuvit/3/edit .

  $("#mask-div")
    .css({
      "position": "absolute",
      "width": 275,
      "height": 110,
      "background": "rgba(0, 0, 0, 0.5)"
    })
    .mouseout( function() {
      $("#mask-div").fadeOut("slow");
    })
    .hide();

  $("#test-img")
    .mouseover( function() {
      $("#mask-div").fadeIn("slow");
    });

以及一些第一次的 CSS: