css3加载样式问题 5
<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metacharset="utf-8"/><...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>d</title>
<meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<style>
.move{
width:100px;
height:100px;
transition: all .2s linear;
background-color:#000
}
button{
width:100px;
height:50px;
}
.close{
transform: translate(42px,-76px) scale(0);
}
.open{
transform: translate(0,0) scale(1);
}
</style>
<body>
<button class="b1">关闭</button>
<button class="b2">打开</button>
</body>
<script>
$(".b1").click(function(){
$(".move").removeClass("open");
$(".move").addClass("close");
})
$(".b2").click(function(){
if($("body").find(".move").length == 0){
$("body").append("<div class='move'></div>")
}
$(".move").removeClass("close");
$(".move").addClass("open");
})
</script>
</html>
请问 我点B2的时候 第一次 加载不到样式 之后就可以了 怎么解决第一次加载样式这问题?
$(".b1").click(function(){
$(".move").removeClass("open");
$(".move").addClass("close");
})
$(".b2").click(function(){
if($("body").find(".move").length == 0){
$("body").append("<div class='move'></div>")
$(".move").removeClass("close");
$(".move").addClass("open");
}
$(".move").removeClass("close");
$(".move").addClass("open");
})
改成这样也不行 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>d</title>
<meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<style>
.move{
width:100px;
height:100px;
transition: all .2s linear;
background-color:#000
}
button{
width:100px;
height:50px;
}
.close{
transform: translate(42px,-76px) scale(0);
}
.open{
transform: translate(0,0) scale(1);
}
</style>
<body>
<button class="b1">关闭</button>
<button class="b2">打开</button>
</body>
<script>
$(".b1").click(function(){
$(".move").removeClass("open");
$(".move").addClass("close");
})
$(".b2").click(function(){
if($("body").find(".move").length == 0){
$("body").append("<div class='move'></div>")
}
$(".move").removeClass("close");
$(".move").addClass("open");
})
</script>
</html>
请问 我点B2的时候 第一次 加载不到样式 之后就可以了 怎么解决第一次加载样式这问题?
$(".b1").click(function(){
$(".move").removeClass("open");
$(".move").addClass("close");
})
$(".b2").click(function(){
if($("body").find(".move").length == 0){
$("body").append("<div class='move'></div>")
$(".move").removeClass("close");
$(".move").addClass("open");
}
$(".move").removeClass("close");
$(".move").addClass("open");
})
改成这样也不行 展开
1个回答
展开全部
如果你说的是第一次不执行动画的话。那么问题就是第一次加在不到是你第一次是append在文档后面添加div，你第一次操作div不存在，当你添加出div，因为div是直接被显示出来，而你的open类是执行动画，你添加出div你的div是显示的，open类也是执行动画显示div，div已经显示出来了所以不会执行动画，而你后面的能执行因为div已经存在，他能正确的执行动画。如果要正确就是div直接写出来不要用js返回，或者用js去操作动画。我所理解的是这样，不知道对你有帮助不。
追问
是的，但是这里是必须JS返回 那个DIV必须是append出来的 而且必须用CSS3的动画 JS怎么操作动画？
追答
js动画效果有很多的， 如果你知道需要哪个放大出来的，动画效果百度也很多的。js兼容性也好，你用css3的ie8以下浏览器都不支持
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
