CODEWITHSUNDEEP
javascriptjqueryhtml
Tilak Madichetti
Tilak Madichetti

Reputation: 4346

How to use jQuery to fadeOut() different parts of a single image ?

The code :

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

fades out the whole element but I want to fade specific parts of an image like 4px from top and 2px from left .If CSS3 methods are needed , I am ready to do so.

Upvotes: 0

Views: 19

Answers (1)

Andrew Evt
Andrew Evt

Reputation: 3689

HTML code:

<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 code: 

.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 */

Your masks have absolute positions, and you can set their sides with .widthXX and .heightXX classes + position about the image with .topXX and .leftXX classes. (this is not ideal method, but it can be done fast)

Than with JS you can detect all that masks (with jQuery - $('.mask')) make an array of objects (if it's needed), and hide tham with .hide() or .fadeOut() methods in line order (0,1,2,3...) or randomly (get random index of array, hide it, and delete element from array).

Hope you understood my thoughts, and will make it better and more interesting :)

Upvotes: 1

Related Questions