Fatal编程技术网

jquery烟团效应

jquery jquery-ui

jquery烟团效应,jquery,jquery-ui,Jquery,Jquery Ui,我有两个问题使用隐藏/显示泡芙效果不透明的中心Div- 在显示和隐藏时，div都会在执行操作之前移动到屏幕的左侧。仅在隐藏时，不透明度将被删除，并且div在隐藏之前显示为纯色 下面是脚本，与Mac上的FF/Opera/Chrome/safari中的问题相同 <style type="text/css"> #toggledDiv{ width: 500px; height: 300px; display: block; position: absolute; border: 1px s

我有两个问题使用隐藏/显示泡芙效果不透明的中心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>
嗯，你有一些问题。为了避免第一次按下切换按钮时出现闪烁，只需颠倒切换功能中隐藏和显示的顺序即可

你做错事了。这是使元素居中的最简单方法，而且始终有效。你的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，这是隐含的

在这里检查一个工作示例

好吧，您有一些问题。为了避免第一次按下切换按钮时出现闪烁，只需颠倒切换功能中隐藏和显示的顺序即可

你做错事了。这是使元素居中的最简单方法，而且始终有效。你的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，这是隐含的

在这里查看一个工作示例

感谢elclanrs示例-帮助了很多esp定心技巧。看起来，puff在运行时会自动将不透明度更改为100%，这会被视为一个bug吗？这似乎不是解决它的办法，所以我只能接受它。感谢elclanrs的示例-帮助了很多esp定心技巧。看起来，当它运行时，puff会自动将不透明度更改为100%，这会被认为是一个bug吗？似乎并不能解决它，所以我只能接受它。