如何在 jQuery 中制作方框淡出？

Question

所以我想在 Jquery 中制作一个方框淡出效果。我正在使用内部样式表。我一遍又一遍地查看代码，但不知道它有什么问题。也许我使用的 CDN 坏了或者版本不正确，但我相信你们可以告诉我我做错了什么。这是代码

<!doctype html>
<html>
<head>
<style>
#box {
position: absolute;
border: 1px solid blue;
background-color: black;
top: 100px;
left: 300px;
padding: 10px;
height: 60px;
width: 80px;
color: white;
}
</style>
<script type="text/javascript"    src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>
<body>

<div id="box">Box</div>
<script type="text/javascript"
$(document).ready(function(){
$("#box").hover(function(){
$(this).fadeOut('slow');
});
});

</body>




</html>

Answer 1

您必须使用 > 结束您的起始标签并且必须有一个结束标签 </script>:

<script type="text/javascript">
  $(document).ready(function () {
    $("#box").hover(function () {
      $(this).fadeOut('slow');
    });
  });
</script>

现在当您 hover 越过框时，它会 fadeOut。

片段

$(document).ready(function() {
  $("#box").hover(function() {
    $(this).fadeOut('slow');
  });
});

#box {
  position: absolute;
  border: 1px solid blue;
  background-color: black;
  top: 100px;
  left: 300px;
  padding: 10px;
  height: 60px;
  width: 80px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box">Box</div>

输出：http://output.jsbin.com/cegidelulu

如何在 jQuery 中制作方框淡出？

How do you make a box fadeout in jQuery?

html

javascript

jquery

fadeout