在有些动画效果中,可能会用到控制页面内容的显示或隐藏,有的是当页面加载时会控制某片区域按照一个方向来展示,或从左向右,或从右向左,甚至从中间向两边。在这里可能会有一些简单的方法来实现这些效果。
在写效果之前,介绍一个定位问题.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)
})
有兴趣的可以看一下效果。