标签：自定义 rgba tar 实例 styles 属性集 .com 选项 12px
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 抽屉网页 </title> <meta name="generator" content="editplus" /> <meta name="author" content="孤城无缘" /> <meta name="keywords" content="关键字" /> <meta name="description" content="描述" /> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> *{margin:0px;} body{background:url("http://ku.shouce.ren/img/beijing/13.gif"); background-position:center top;} #box{width:1100px;height:429px;margin:150px auto;} .img{width:100px;height:429px;float:left;} .curr{width:789px;} .txt{width:76px;height:405px;background:rgba(0,0,0,0.5);padding:24px 0px 0px 24px;} .p1{font-size:12px;color:#fff;width:12px;float:left;font-weight:bold;text-align:center;margin-right:20px;font-family:"幼圆"} .p2{font-size:14px;color:#fff;width:14px;float:left;font-weight:bold;font-family:"楷体";} </style> </head> <body> <div id="box"> <div class="img curr" style="background:url(http://ku.shouce.ren/img/da/1.jpg)"> <div class="txt"> <p class="p1">作者</br>:韩春城</p> <p class="p2">春来花争艳</br>,城外万里香</br>.</p> </div> </div> <div class="img" style="background:url(http://ku.shouce.ren/img/da/11.jpg)"> <div class="txt"> <p class="p1">作者</br>:孤城无缘</p> <p class="p2">如果世界漆黑</br>,其实你很美</br>!</p> </div> </div> <div class="img" style="background:url(http://ku.shouce.ren/img/da/16.jpg)"> <div class="txt"> <p class="p1">作者</br>:李荣浩</p> <p class="p2">在爱情里面进退</br>,最多被消费</br>.</p> </div> </div> <div class="img" style="background:url(http://ku.shouce.ren/img/da/17.jpg)"> <div class="txt"> <p class="p1">作者</br>:音乐</p> <p class="p2">爱的描述</br>,是音乐的字符</br>!</p> </div> </div> </div> </body> <script type="text/javascript"> $(".img").hover(function(){ $(this).stop().animate({width:"789px"},1000).siblings().stop().animate({width:"100px"},1000);}); </script> </html>
一： jQuery 效果 - animate() 方法：
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。
$(selector).animate(styles,speed,easing,callback)
| 参数 | 描述 |
|---|---|
| styles |
必需。规定产生动画效果的 CSS 样式和值。 可能的 CSS 样式值（提供实例）：
注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。 |
| speed |
可选。规定动画的速度。默认是 "normal"。 可能的值：
|
| easing |
可选。规定在不同的动画点中设置动画速度的 easing 函数。 内置的 easing 函数：
扩展插件中提供更多 easing 函数。 |
| callback |
可选。animate 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 |
$(selector).animate(styles,options)
| 参数 | 描述 |
|---|---|
| styles | 必需。规定产生动画效果的 CSS 样式和值（同上）。 |
| options |
可选。规定动画的额外选项。 可能的值：
|
二 stop() 方法停止当前正在运行的动画。
三 siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
标签：自定义 rgba tar 实例 styles 属性集 .com 选项 12px
原文地址：http://www.cnblogs.com/liuyanxia/p/6143596.html
