jQuery siblings()

方法返回被选元素的所有同胞元素，并且可以使用可选参数来过滤对同胞元素的搜索。

实例演示：点击某个li标签后将其设置为红色，而其所有同胞元素去除红色样式

1. 创建Html元素

<div class="box">
               <span>点击li元素设置红色并去除其余所有同胞元素的红色样式：</span><br>
               <div class="content">
                               <li>栗子</li>
                               <li>李子</li>
                               <li>梨子</li>
                               <li>荔枝</li>
               </div>     
</div>

1. 设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
li{padding:10px;}
.red{color:red;}

1. 编写jquery代码

$(function(){
               $("li").click(function() {
                               $(this).addClass('red');    // 设置被点击元素为红色
                               $(this).siblings('li').removeClass('red'); // 去除所有同胞元素的红色样式
               })
})

1. 观察效果

• 点击李子，李子呈红色，其余li元素正常

animate()

函数用于执行一个基于css属性的自定义动画。

你可以为匹配的元素设置css样式，animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画。

例如：某个div元素的当前高度为100px，将其CSS height属性设为200px，animate()将会执行一个将div元素的高度从100px逐渐增加到200px的过渡动画。

该函数属于jQuery对象(实例)。

jQuery 1.0 新增该函数。animate()函数主要有以下两种形式的用法：

用法一：

用法二：

用法二是用法一的变体。以对象形式指定所需的选项参数(可指定比用法一更多的选项参数)。

参数options对象可以识别如下的属性(以下属性均是可选的)：

此外，jQuery 1.4 和 1.8 还为参数options新增了许多新的选项支持，但这些参数并不常用，此处不再赘述，详见jQuery官方文档。

animate()函数的返回值为jQuery类型，返回当前jQuery对象本身。

除了以下提到的值外，所有动画css属性都应该可以变化为一个单一的数值。使用基本的jQuery功能，大多数非数值的css属性都无法用来执行动画。例如：width、height、left、top都可用于动画，但color、background-color无法用于动画(除非使用jQuery.Color()插件)。除非你为属性值指定了单位(例如：px、em、%)，否则默认的数值单位为像素(px)。

速写的css属性可能无法获得完整全面的支持，例如：border、margin等，因此不推荐使用。

你还可以将css属性值设为一些特定的字符串，例如："show"、"hide"、"toggle"，则jQuery会调用该属性默认的动画形式。

此外，css属性值也可以是相对的，你可以为属性值加上前缀"+="或"-="，以便于在原来的属性值上增加或减少指定的数值。例如：{ "height": "+=100px" }，表示在原有高度的基础上增加100px。

请参考下面这段初始HTML代码：

以下是与animate()函数相关的jQuery示例代码，以演示animate()函数的具体用法：