如何使用jQuery淡出（）單個圖像的不同部分？

Question

編碼 ：

$("#button1").click(function(){
    $("img").fadeOut();
});

淡出整個元素，但我想淡出圖像的特定部分，例如頂部4px和左側2px。如果需要CSS3方法，我已經准備好了。

Answer 1

HTML代碼：

<div class="container">
    <div class="image"></div>
    <div class="mask width100 height3 top0 left0"></div>
    <div class="mask width100 height3 top0 left3"></div>
    <div class="mask width3 height54 top10 left22"></div>
    <div class="mask width10 height30 top40 left12"></div>
    <!-- more masks goes here -->
</div>

CSS代碼：

.container {
    position: relative;
    width: 400px;
    height: 400px;
}

.image {
    width: 100%;
    height: 100%;
    background: url(/*your url*/);
}

.mask {
    position: absolute;
    background: #000;
}

.width100 { width: 100% }
.width10 { width: 10% }
.width3 { width: 3% }
/* etc */

height3 { height: 3% }
height30 { height: 30% } 
height100 { height: 100% }
/* etc */

top0 { top: 0 }
top5 { top: 5% }
/* etc */

你的口罩有absolute位置，並且可以設置他們的邊.widthXX和.heightXX類+與左右圖像位置.topXX和.leftXX類。 （這不是理想的方法，但是可以快速完成）

比JS你可以檢測所有的面具（使用jQuery - $('.mask')創建一個對象數組（如果它需要），並隱藏艾德里安與.hide()或.fadeOut()排隊順序的方法（ 0,1,2,3 ...）或隨機（獲取數組的隨機索引，將其隱藏，然后從數組中刪除元素）。

希望您理解我的想法，並將它變得更好，更有趣:)