jQuery中效果animate方法解决width是百分比出现的问题

【摘要】在jQuery的效果中，可以使用animate方法来实现div的width或者height的变化效果，但是如果div初始的width是百分比的话，则会出现一个问题，width会从0开始变化，这篇文章提出一个解决方法。

需求：有的时候，我们需要做一个这样的效果，就是在不知道页面的大小时，我们要将div从某个百分比%的宽度在指定时间内变化到另外一个百分比%的宽度，实现一个动画效果。

问题举例：div的width是40%，我想通过animate方法来实现动画效果，把width变成60%，正常情况是在指定的时间内width从40%变化到60%，而问题恰恰就出现在这里，jQuery无法识别初始的widht：40%是多少，所以无法识别就默认是0px了，所以jQuery给出的效果是width从0px在指定的时间内变化到60%的宽度，这里的60%jQuery是可以通过计算后得到的像素大小。

解决方法：width不使用百分比，而是先计算出当前百分比所对应的宽度px，使用像素px来代替百分比%。

下面是代码示例：

1. //    引入jQuery文件

2. <script src="jquery-1.8.2.min.js"></script>

1. //    HTML代码

2. <div id='id' animate='0' class='box'>width:40%</div>

1. //    CSS样式

2. <style type="text/css">

3. 	*{margin:0;padding:0;font-size:12px;}

4. 	.box{width:40%;height:100px;border:1px dotted #333;margin:100px auto;text-align:center;line-height:100px;}	

5. </style>

1. //    jQuery代码

2. <script type="text/javascript">

3. 	$("#id").click(function(){

4. 		var animate=$(this).attr("animate");

5. 		if(animate==1){

6. 			curWidth=$(this).width()*0.8;

7. 			$(this).attr("animate",0);		

8. 			$(this).animate({"width":curWidth},1000);

9. 			$(this).html('width:40%');

10. 		}else if(animate==0){

11. 			curWidth=$(this).width()*1.2;

12. 			$(this).attr("animate",1);

13. 			$(this).animate({"width":curWidth},1000);	

14. 			$(this).html('width:60%');

15. 		}	

16. 	})

17. </script>

程序运行的效果图如下：

本文是否对你有所帮助呢，如有帮助请点个赞哦，谢谢~~

我要打赏