javascript - 如何使用 jQuery fadeOut() 单个图像的不同部分？

Question

代码:

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

淡出整个元素，但我想淡出图像的特定部分，例如顶部 4 像素和左侧 2 像素。如果需要 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 */

您的蒙版具有绝对位置，您可以使用.widthXX和.heightXX类设置它们的边+使用图像的位置code>.topXX 和 .leftXX 类。 (这不是理想的方法，但可以快速完成)

与 JS 相比，您可以检测所有掩码(使用 jQuery - $('.mask'))生成对象数组(如果需要)，并使用 隐藏它们。 hide() 或 .fadeOut() 方法按行顺序(0,1,2,3...)或随机(获取数组的随机索引，隐藏它并删除元素来自数组)。

希望你理解我的想法，并会让它变得更好、更有趣:)