Jquery中的filter()详细说明和transition的用法

filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

详细说明

如果给定表示 DOM 元素集合的 jQuery 对象，.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素；所有匹配该选择器的元素都会包含在结果中。

请思考下面这个拥有简单列表的页面：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我们可以向这个列表项集合应用该方法：

$('li').filter(':even').css('background-color', 'red');

效果图为：

其中：

CSS Code:

.floor .hd{background:url(images/floor.png) no-repeat top left}
.lea-container{width:100%;background:url(images/3.png) repeat;}
.floor{ width:1002px; margin:36px auto 0;}
.floor .hd{ height:54px; width:1002px; position:relative;}
.floor-5 .hd{ background-position:0 -464px;}
.floor .hd h2{ visibility:hidden;}
.floor .bd{ width:1000px; margin:0 auto; height:586px; overflow:hidden; position:relative;}
.floor-5 .item{width:249px;height:450px;font-size:12px;float:left;overflow:hidden;background-color:#eae7e4;border-right:1px solid #b89b8a;-webkit-transition:background .5s ease;-moz-transition:background .5s ease;-ms-transition:background .5s ease;-o-transition:background .5s ease;transition:background .5s ease}
.floor-5 .last{border-right:0}
.floor-5 .item .pic{height:249px;height:221px;overflow:hidden;background-position:0 0;-webkit-transition:background 2s ease;-moz-transition:background 2s ease;-ms-transition:background 2s ease;-o-transition:background 2s ease;transition:background 2s ease}
.floor-5 .item .lea-intro{width:74%;margin:0 auto 10px;color:#451200;text-align:left}
.floor-5 .item .more-link{font-family:'宋体';color:#451200;display:block;width:74%;margin:0 auto 10px;text-align:left}
.floor-5 .even{background-color:#f9f8f7}
.floor-5 .over{background-color:#d9d3cd}
.floor-5 .over .pic{background-position:0 -49px}
.floor a,.top-menu a{text-decoration:none}
.g-top .g-top-wrap,.g-header .g-header-wrap,.g-menu .g-menu-wrap{width:1000px}

JS Code:

$(function() {
$(".floor-5 .item").hover(function(){$(this).toggleClass("over")}).filter(":even").addClass("even");
});

图片效果：

其中：当鼠标移到四个框中的时候，里面的background高度动画得向上逐渐变慢形式移动49px的高度，其中的动画用到了transition这个CSS3的属性名，另外所有偶数都添加了even这个类样式，变成所有偶数都出现了一点发白的背景效果，是一个很好的效果哦，以后可以经常用到这个效果的！

HTML Code:

<div class="floor floor-5">
<div class="hd"><h2>真皮世界</h2></div>
<div class="bd">
<ul>
<li class="item">
<div class="wrap">
<a href="http://mkt.mbaobao.com/a-leatherbwg1008/" target="_blank"><div class="pic" style="background-image:url(http://cca0.mbaobao.com/mkts/201403/07/gn/gn03.jpg)"></div></a>
<div class="title">
<img src="indexjscss/gn0303.png" alt="" width="250" height="82">
<p class="lea-intro"></p>
<a href="http://mkt.mbaobao.com/a-leatherbwg1008/" class="more-link" target="_blank">材质决定品味，真皮通过不同的工艺，制作出不同的皮料，如：摔纹、荔枝纹、十字纹、纳帕纹、动物纹等，这些皮料有各自的特点。查看更多&gt;&gt;</a>
</div>
</div>
</li>
<li class="item">
<div class="wrap">
<a href="http://mkt.mbaobao.com/a-leather_progress/" target="_blank"><div class="pic" style="background-image:url(http://cca4.mbaobao.com/mkts/201403/07/gn/gn02.jpg)"></div></a>
<div class="title">
<img src="indexjscss/gn0202.png" alt="" width="250" height="82">
<p class="lea-intro"></p>
<a href="http://mkt.mbaobao.com/a-leather_progress/" class="more-link" target="_blank">用最真诚的情怀，最严谨的工艺，打造出最真实的牛皮包，每一个工艺细节，都是我们精益求精的追求。 查看更多&gt;&gt;</a>
</div>
</div>
</li>
<li class="item">
<div class="wrap">
<a href="http://mkt.mbaobao.com/a-leather_maintenance/" target="_blank"><div class="pic" style="background-image:url(http://cca2.mbaobao.com/mkts/201403/07/gn/gn01.jpg)"></div></a>
<div class="title">
<img src="indexjscss/gn0101.png" alt="" width="250" height="82">
<p class="lea-intro"></p>
<a href="http://mkt.mbaobao.com/a-leather_maintenance/" class="more-link" target="_blank">市场上流行的皮革制品有真皮和合成革两大类，那么如何鉴别真皮呢？如何进行保养呢？查看更多&gt;&gt;</a>
</div>
</div>
</li>
<li class="item last">
<div class="wrap">
<a href="http://show.mbaobao.com/index?patternk=3291" target="_blank"><div class="pic" style="background-image:url(http://cca0.mbaobao.com/mkts/201403/07/gn/gn04.jpg)"></div></a>
<div class="title">
<img src="indexjscss/gn0404.png" alt="" width="250" height="82">
<p class="lea-intro"></p>
<a href="http://show.mbaobao.com/index?patternk=3291" class="more-link" target="_blank">我们一直坚持提供最真实的真皮包，我们很感谢麦友们的支持，我们期待麦友发来更多的图片展示你们的迷人风采哦！查看更多&gt;&gt;</a>
</div>
</div>
</li>
</ul>
</div>
</div>

文件实例分享下载地址：http://yunpan.cn/QIe8QKKiwFJvR