jquery泡芙效果
jquery泡芙效果
提问于 2012-02-08 10:25:22
我在不透明的居中Div上使用隐藏/显示泡泡效果有两个问题；
在显示和隐藏时，div都会在执行操作之前移到屏幕的左侧。仅在隐藏时，不透明度将被移除，div在隐藏前显示为纯色。
下面是脚本，在Mac上的FF/Opera/Chrome/safari中同样的问题
<style type="text/css">
#toggledDiv{
width: 500px;
height: 300px;
display: block;
position: absolute;
border: 1px solid red;
margin:0 auto;
left:0;
right:0;
background-color: black;
opacity: 0.40;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#tgBtn").toggle(function(){
$("#toggledDiv").show( "puff",{ }, 750 );
},function(){
$("#toggledDiv").hide( "puff",{ }, 750 );
});
});
</script>
<body>
<button id="tgBtn">Toggle</button>
<div id="toggledDiv"></div>
</body>回答 1
Stack Overflow用户
发布于 2012-02-08 10:54:10
好吧，你在这方面有一些问题。为了避免第一次按下切换按钮时的闪烁，只需颠倒切换功能中隐藏和显示的顺序即可。
要使div居中，您这样做是错误的。这是使元素居中的最简单方法，而且总是有效的。您的div将不再移动到侧面。
div {
width: 500px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px /* Half the height */
margin-left: -250px /* Half the width */
}对于使用动画的不透明度，您也需要使用jQuery。我把它作为回调函数来做，但你也可以一起来做。
顺便说一句，当您声明position: absolute时，您不需要display: block，这是暗示的。
在此处查看工作示例http://jsfiddle.net/q7FcA/5/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9186995
复制相关文章
相似问题
腾讯云开发者
