利用jquery制作滚动到指定位置触发动画

利用CSS3的 animation 动画特性来完成的，对IE的兼容性不是太好，适用与手机端。

<！doctype html><html><head><meta charset="utf-8"><title>sas</title><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><style type="text/css">*{ margin:0px; padding:0px;}.gs{position:relative;top:800px; background-color:#099; left:150px; width:80px; }.xz{animation:roate 2s;animation-fill-mode:forwards;animation-direction:alternate;}@keyframes roate{from { transform:rotate（0deg）;width:100px;height:100px; }to{transform:rotate（360deg）;width:200px;height:200px;}}.xs{ width:50px; float: left; height:30px; background-color: #F90; position:fixed; left:700px; top:0px;}</style></head><body><script type="text/javascript">function gdjz（div,cssname,offset）{var a,b,c,d;d=$（div）.offset（）.top;a=eval（d + offset）;b=$（window）.scrollTop（）; c=$（window）.height（）;if（b+c>a）{$（（div））.addClass（（cssname））;}}$（document）.ready（function（e） {$（window）.scroll（function（）{gdjz（"#dh","xz",500）;}/*var a,b,c;a=$（"#dh"）.offset（）.top;//元素相对于窗口的距离b=$（window）.scrollTop（）; //监控窗口已滚动的距离;c=$（document）.height（）;//整个文档的高度d=$（window）.height（）;//浏览器窗口的高度*//*if（d+b>a+100）{$（"#dh"）.addClass（"xz"）;}*/）;}）;</script><div style="height:1800px; background-color:#999; width:500px; float:left;"><div id="dh" class="gs" >触发动画</div></div><div class="xs"></div></body></html>