你如何在jQuery中制作一个框淡出?

时间:2015-12-13 00:34:14

标签: javascript jquery html fadeout

所以我试图在Jquery中制作一个框淡出。我使用内部样式表。我一次又一次地查看代码并且不知道它有什么问题。也许我使用的CDN是破坏或不是正确的verison,但我相信你们可以告诉我我做错了什么。这是代码

<!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 个答案:

答案 0 :(得分:1)

您必须使用ul { list-style-type: none; } li:first-child { border-radius: 5px 5px 0 0; } li:last-child { border-radius: 0 0 5px 5px; } li { background-color: beige; border: 1px solid #ccc; }关闭起始标记,并且必须有一个结束标记<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> <div ng-app="demoApp" ng-controller="MainController"> <my-tabs close-others="{{true}}"> <tab title="Tab One" open="open"> <div>content 1</div> </tab> <tab title="Tab Two"> <div>Tab 2 content</div> </tab> <tab title="Tab Three"> <div>Tab 3 content</div> </tab> </my-tabs> </div>

>

现在当你</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');
  });
});

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