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

学习笔记 马富天 2016-05-27 17:12:13 539 1

【摘要】在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>

程序运行的效果图如下:

请输入图片名称请输入图片名称

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

版权归 马富天个人博客 所有

本文标题:《jQuery中效果animate方法解决width是百分比出现的问题》

本文链接地址:http://www.mafutian.com/131.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

1

5

上一篇《 PHP不使用第三个变量$c实现变量换值的7种方式 》 下一篇《 4个步骤教你如何提高电脑的上网速度 》

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共1条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多