有方向的控制div的显示或隐藏

在有些动画效果中，可能会用到控制页面内容的显示或隐藏，有的是当页面加载时会控制某片区域按照一个方向来展示，或从左向右，或从右向左，甚至从中间向两边。在这里可能会有一些简单的方法来实现这些效果。

在写效果之前，介绍一个定位问题.position: relative;这个relative的定位，会特殊一些，它的定位是按照相对于原本自身所在位置进行重新偏移定位（也就是设定的left，top等属性），但是它的定位又没有脱离文档流，而absolute的定位，确实脱离文档流的，这会使原本的位置“塌陷”。

今天的动画展示，需要一个button按钮和一个div。

这里html代码很简单

<div class="test"></div>
<input type="button" name="but" id="but" value="点击消失" />

然后是css代码

.test{width: 500px;height: 500px;background-color: red;position: relative;}

值得注意的是这里需要一个相对定位，相对定位是为了在jq代码中控制位置。

JQuery代码如下：

$('#but').on('click',function () {
var w = $('.test').width();
$('.test').animate({
width:0,
left:w
},5000)
})

这里有两个参数，一个是宽度变化量，

另一个是位置，left,这个位置可以控制div从哪个方向开始逐渐消失，若是将left，定到中间，则会出现从两边向中间逐渐消失。

同理还能做到上下方向的控制。

相信上面的方法懂了之后，关于展开，或者逐渐消失更多动画都不成问题了。

这里还要说一下，一个简单的动画。

       css代码：

.test{width: 500px;height: 500px;background-color: red;position: relative;}
.test_inner{height: 500px;background-color: #FFF;margin: 0 auto;width: 0;}

       html代码：

<div class="test">
<div class="test_inner">

</div>
</div>
<input type="button" name="" id="butt" value="点击展开" />

JQuery代码：

$('#butt').click(function () {
var w = $('.test').width();
$('.test_inner').animate({
width:w
},5000)
})

有兴趣的可以看一下效果。

转载于:https://www.cnblogs.com/qizhichao/p/6003956.html