<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../jquery/jquery-1.9.1.min.js"></script>
<script src="../jquery/js/jquery-ui-1.10.3.custom.js"></script>
<link href="../jquery/css/cupertino/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link rel="stylesheet" href="../jquery/themes/base/jquery.ui.all.css">
<script src="../jquery/ui/jquery.ui.core.js"></script>
<script src="../jquery/ui/jquery.ui.widget.js"></script>
<script src="../jquery/ui/jquery.ui.position.js"></script>
<script src="../jquery/ui/jquery.ui.menu.js"></script>
<script src="../jquery/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="css/demos.css">
<script type="text/javascript">
$(document).ready(function(){//预加载函数，当Dom树加载完成后，执行的函数
$("button").click(function(){//为button元素添加click事件匿名函数。
$("div").animate({left:'350'});//div从原有位置向左移动350px的动画
$("#div-log").html($("#div-log").html()+"<p>"+"animate()方法 ：实现Animate动画"+"</p>");
})
})
</script>
<style type="text/css">
body{
font: 62.5% "Trebuchet MS",sans-serif;
margin: 64px;
}
#h2-caption{
font:20px "Trebuchet MS",sans-serif;
}
p{
font:16px "Trebuchet MS",sans-serif;
}
.demoHeaders{
margin-top: 2em;
}
#div-log{
font: 13.5px "Trebuchet MS",sans-serif;
}
</style>
</head>
<body>
<h2 id="h2-caption">超实用的jQuery代码段 - jQuery实现Animate动画</h2>
<hr><br>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<!--position解释
CSS的Position很重要，有以下几个值：static，relative，absolute，fixed。
Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
text-align的解释见http://www.w3school.com.cn/cssref/pr_text_text-align.asp
-->
<div style="background: #98bf21;height: 60px;width: 100px;position: absolute;text-align: center;">
<b>我会动画功能的哦！</b><br>
<b>我会动画功能的哦！</b><br>
<b>我会动画功能的哦！</b><br>
</div>
<br><br><br><br><br><br><hr>
<div id="div-log">
<p>日志记录：</p>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../jquery/jquery-1.9.1.min.js"></script>
<script src="../jquery/js/jquery-ui-1.10.3.custom.js"></script>
<link href="../jquery/css/cupertino/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link rel="stylesheet" href="../jquery/themes/base/jquery.ui.all.css">
<script src="../jquery/ui/jquery.ui.core.js"></script>
<script src="../jquery/ui/jquery.ui.widget.js"></script>
<script src="../jquery/ui/jquery.ui.position.js"></script>
<script src="../jquery/ui/jquery.ui.menu.js"></script>
<script src="../jquery/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="css/demos.css">
<script type="text/javascript">
$(document).ready(function(){//预加载函数，当Dom树加载完成后，执行的函数
$("button").click(function(){//为button元素添加click事件匿名函数。
$("div").animate({left:'350'});//div从原有位置向左移动350px的动画
$("#div-log").html($("#div-log").html()+"<p>"+"animate()方法 ：实现Animate动画"+"</p>");
})
})
</script>
<style type="text/css">
body{
font: 62.5% "Trebuchet MS",sans-serif;
margin: 64px;
}
#h2-caption{
font:20px "Trebuchet MS",sans-serif;
}
p{
font:16px "Trebuchet MS",sans-serif;
}
.demoHeaders{
margin-top: 2em;
}
#div-log{
font: 13.5px "Trebuchet MS",sans-serif;
}
</style>
</head>
<body>
<h2 id="h2-caption">超实用的jQuery代码段 - jQuery实现Animate动画</h2>
<hr><br>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<!--position解释
CSS的Position很重要，有以下几个值：static，relative，absolute，fixed。
Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
text-align的解释见http://www.w3school.com.cn/cssref/pr_text_text-align.asp
-->
<div style="background: #98bf21;height: 60px;width: 100px;position: absolute;text-align: center;">
<b>我会动画功能的哦！</b><br>
<b>我会动画功能的哦！</b><br>
<b>我会动画功能的哦！</b><br>
</div>
<br><br><br><br><br><br><hr>
<div id="div-log">
<p>日志记录：</p>
</div>
</body>
</html>
扫一扫
9528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
