Надо разрезать картинку на NxN ячеек, и у каждой ячейки изменять opacity. Причём чем ближе к нижнему правому углу, тем сильнее изменять. Получается такой эффект, будто картинка сворачивается в угол.
Скрытие работает нормально, а вот с раскрытием какая-то дичь.
Помогите сообразить, какая формула нужна для opacity!
<img height="341" width="512" id="main" src="http://farm9.staticflickr.com/8228/8503485139_0b55e2a857_b.jpg" />
<script type="text/javascript">
(function () {
"use strict";
function dissolve(elem, options) {
options = options || {};
options.duration = options.duration || 500;
options.tiles = options.tiles || 10;
var pos = elem.getBoundingClientRect();
var top = pos.top;
var left = pos.left;
var tileWidth = Math.round(elem.clientWidth / options.tiles);
var tileHeight = Math.round(elem.clientHeight / options.tiles);
var allTiles = [];
var show = options.action == "show";
for (var i = j = 0; i < options.tiles; i++) {
for (var j = 0; j < options.tiles; j++) {
var tile = document.createElement("DIV");
document.body.appendChild(tile);
tile.style.position = "absolute";
tile.style.overflow = "hidden";
tile.style.width = tileWidth + "px";
tile.style.height = tileHeight + "px";
tile.style.top = (top + i * tileHeight) + "px";
tile.style.left = (left + j * tileWidth) + "px";
tile.style.opacity = show ? 0 : 1;
var tileContent = elem.cloneNode(true);
tileContent.style.position = "static";
tile.appendChild(tileContent);
tileContent.style.marginLeft = (-j * tileWidth) + "px";
tileContent.style.marginTop = (-i * tileHeight) + "px";
tileContent.style.visibility = "visible";
j == 0 ? allTiles.push([tile]) : allTiles[i].push(tile);
}
}
var start = +new Date();
fx();
function fx() {
var m = (+new Date() - start) / options.duration;
if (m > 1) m = 1;
if (m < 1) setTimeout(fx, 17);
for (var i = j = 0; i < options.tiles; i++) {
for (var j = 0; j < options.tiles; j++) {
var d = m * options.tiles / Math.min(i + 1, j + 1);
if (d < 0) d = 0; if (d > 1) d = 1;
allTiles[i][j].style.opacity = show ? d : 1 - d;
}
}
}
setTimeout(function () {
for (var i = j = 0; i < options.tiles; i++) {
for (var j = 0; j < options.tiles; j++) {
document.body.removeChild(allTiles[i][j]);
}
}
}, options.duration);
if (show) {
setTimeout(function () {
elem.style.visibility = "visible";
}, options.duration);
} else {
elem.style.visibility = "hidden";
}
}
window.Dissolve = {
show : function (elem, tiles, duration) {
dissolve(elem, {
duration : duration, tiles : tiles, action : "show"
});
},
hide : function (elem, tiles, duration) {
dissolve(elem, {
duration : duration, tiles : tiles, action : "hide"
});
}
};
})();
var toggler = true;
document.onclick = function () {
Dissolve[toggler ? "hide" : "show"]( document.getElementById("main") );
toggler = !toggler;
};
</script>
Сама формула в 53 и 55 строчках, проблема именно там.