什么是同步动画,什么是列队动画,请举例说明
发布网友
发布时间：2024-09-17 05:25
共1个回答
热心网友
时间：2024-12-04 03:42
<html>
<head>
<meta charset="UTF-8" />
<title>last</title>
<style type="text/css">
.div1 {
position: absolute;
width: 200px;
height: 200px;
background: red;
}
.div2 {
width: 100px;
height: 100px;
background: blue;
margin: 50px auto;
color: #fff;
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
{
var div1 = $ ('.div1'), div2 = $ ('.div2');
div1.hover (function ()
{
div1.animate (
{
height : '300px'
}, 1000).queue (function ()
{
div2.fadeIn ("slow");
$ (this).dequeue ();
});
}, function ()
{
$ ("div").queue ("fx", []);
$ ("div").stop ();
div2.fadeOut ("slow").queue (function ()
{
div1.animate (
{
height : '200px'
}, 1000);
$ (this).dequeue ();
});
});
});
</script>
</head>
<body>
<div class="div1">
<div class="div2">这是第二个div，他们的关系不一定是嵌套的！</div>
</div>
</body>
</html>
