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:

Kho plugin của tôi

DevVN Woocommerce Reviews

Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy

Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK vs Woocommerce

Plugin Kết nối Zalo OA với WordPress

*{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 đó:

.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!

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

Dự án website bán laptop surface

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