Question

我在不透明的居中Div上使用隐藏/显示抽吸效果有2个问题; -

在显示和隐藏时，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>

Answer 1

那么你有一些问题。当您第一次按下切换按钮时，为了避免闪烁，只需反转hide＆amp;的顺序。显示在切换功能中。

要使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/

jquery粉扑效果

1 个答案: