-3

So I am trying to make a box fadeout in Jquery. I'm using an internal stylesheet. i've looked over the code again and again and don't know what is wrong with it. maybe the CDN I used is broke or not the right verison, but im sure you guys could tell me what I have done wrong. here is the code 

<!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>

1 Answers1

1

You have to close your starting tag with > and have to have an ending tag </script>:

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

Now when you hover over the box, it will fadeOut.

Snippet

$(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>

Output: http://output.jsbin.com/cegidelulu

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252