Làm mờ các phần tử trong li

Một hiệu ứng phù hợp với giao diện metro website. Các bạn cùng tìm hiểu nha.

DemoDownload Now

Các thành phần chính:

HTML:

<div>
<ul>
<li><a href="#"><img src="https://lh4.googleusercontent.com/-J621cGpOQ7U/T4xwcZZSH1I/AAAAAAAAJFI/d2J1pCOj9ac/s57/Facebook%2520alt%25201.png"></a></li>
<li><a href="#"><img src="https://lh5.googleusercontent.com/-G6yamZXq9Cs/T4xwcdajchI/AAAAAAAAJFQ/psDy5hhHRBY/s57/Google%252B%2520alt.png"></a></li>
<li><a href="http://www.youtube.com/watch?v=vGR7Qbbgs-s&amp;feature=plcp" target="_blank"><img src="https://lh4.googleusercontent.com/-ao9NUL4mmD8/T4xwdY9OIhI/AAAAAAAAJFY/P4FJK8DEsYk/s57/YouTube%2520alt%25201.png"></a></li>
<li><a href="#"><img src="https://lh5.googleusercontent.com/-a6BkH5MZiR4/UEnig0PU7NI/AAAAAAAABkI/ES0US1pYkg0/s57/homea6.png"></a></li>
<li><a href="#"><img style="width: 200px" src="https://lh4.googleusercontent.com/-6hSpPjttNBk/UEnfUA328MI/AAAAAAAABj0/MV53ESaBtRo/s200/lienhe.png"></a></li>
</ul>
</div>

CSS:

*{margin: 0;padding:0}
.fade{
width: 200px;
margin: 0 auto;
top: 200px;
position: relative;
}
.fade ul li img{
width: 50px;
height: 50px;
}
.fade ul li{
list-style: none;
float: left;
}

Java:
Bạn cần file fadelist.js và thêm đoạn code này vào web là ok

$(document).ready(function(){
if(!$.browser.msie) $(".fade ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);},
function() { $(this).siblings().stop().fadeTo(400,1); });
});

Trong đó:

Mẫu website nổi bật của tôi

Mẫu website bán thiết bị nhà bếp, nhà tắm, thiết bị vệ sinh tuyệt đẹp

Mẫu website bán hàng giống shopee

Mẫu website bán đồ gỗ, đồ thờ, đồ phòng thủy

Web bán giày

.fadeTo(400,0.4) là thông số khi đưa chuột vào 1 phần tử trong <li> thì các phần tử còn lại giảm opacity còn 0.4

.fadeTo(400,1) khi đưa chuột ra khỏi <div> thì opacity là 1

Chú ý: chỉ các thẻ ul li trong <div> có mới có hiệu ứng này thôi nhé. Nếu muốn thay đổi thì bạn thay đổi trong phần java nhé $(“.fade ul li”)

Các bạn thay đổi lại cho phù hợp với mình nha.

Chúc các bạn thành công!