87,914
社区成员
发帖
与我相关
我的任务
分享
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="file:///C|/Users/qqbnb/Desktop/web/js/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$(".button1").click(function(){
$("p").text("移动文本");
var div=$("div");
div.animate({paddingRight:"10px",opacity:'0.1'},"slow");
div.animate({paddingRight:"0px",opacity:'1'},"slow");
});
$(".button2").click(function(){
$("p").text("变化完毕2222");
var div=$("div");
div.animate({paddingLeft:'50px',opacity:'0.1'},"slow");
div.animate({paddingLeft:'0px',opacity:'1'},"slow");
});
});
</script>
<style>
div{
position:absolute;
top:25%;
left:25%;
}
p{
font-family:"微软雅黑";
font-size:110px;
line-height:95px;}
</style>
</head>
<body>
<button class="button1">UI</button>
<button class="button2">按钮2</button>
<div><p>移动文本</p>
</div>
</body>
</html>
div.animate({marginLeft::'-50px',opacity:'0.1'},"slow");
div.animate({marginLeft::'0px',opacity:'1'},"slow");
$(".button1").click(function(){
$("p").text("移动文本");
var div=$("div");
div.animate({left:"10px",opacity:'0.1'},"slow");
div.animate({left:"25%",opacity:'1'},"slow");
});
div{
text-align: center;
}
你的css样式干扰了