I will show you how to change the opacity value of an object using JavaScript. I will create a function that can be use in conjunction with the animation function posted earlier (see resources below).
The function is simple
var developercaster = {
opacity: function (id, opacity) {
var o = $(id).style;
o.opacity = (opacity / 100);
o.MozOpacity = (opacity / 100);
o.KhtmlOpacity = (opacity / 100);
o.filter = "alpha(opacity=" + opacity + ")";
}
}
See usage example:
Set opacity to 0 on object id = ‘i’
developercaster.opacity(’i’, 0);
However, the function by itself is not as useful but when combined with our previously posted animation function it can be a neat tool to have. So, I will add two of our extra functions to this example:
var developercaster = {
opacity: function (id, opacity) {
var o = $(id).style;
o.opacity = (opacity / 100);
o.MozOpacity = (opacity / 100);
o.KhtmlOpacity = (opacity / 100);
o.filter = "alpha(opacity=" + opacity + ")";
},
animate: function (params) {
var speed = Math.round(params.speed / 1000);
var timer = 0;
if (params.start > params.end) {
for (var i = params.start; i >= params.end; i--) {
(function (i, _f, speed, timer) {
setTimeout(function () { _f(i); }, (timer * speed));
})(i, params.func, speed, timer);
timer++;
}
} else if (params.start < params.end) {
for (var index = params.start; index <= params.end; index++) {
(function (i, _f, speed, timer) {
setTimeout(function () { _f(i); }, (timer * speed));
})(index, params.func, speed, timer);
timer++;
}
}
//Callback
if (typeof (params.callback) != 'undefined') {
if ((typeof (params.callback) == 'function')) {
window.setTimeout(function () {
params.callback(); //Execute callback
}, (speed * timer));
}
}
},
addEvent: function (id, _event, _function) {
_object = $(id);
if (_object.addEventListener) {
_object.addEventListener(_event, _function, false);
} else if (_object.attachEvent) {
if (_event.length > 2) {
if (_event.substring(0, 2) != "on") {
_event = 'on' + _event;
}
}
_object.attachEvent(_event, _function);
}
}
};
Usage example:
JavaScript
window.onload = function () {
developercaster.opacity('i', 0);
developercaster.addEvent('show', 'click', function () {
developercaster.animate({
speed: 5000,
start: 0,
end: 100,
func: function (i) {
developercaster.opacity('i', i);
}
});
});
developercaster.addEvent('hide', 'click', function () {
developercaster.animate({
speed: 5000,
start:100,
end: 0,
func: function (i) {
developercaster.opacity('i', i);
}
});
});
};
HTML
<input name="show" type="button" value="Show Object" />
<input name="hide" type="button" value="Hide Object" />
<div id="i" style="width:300px; height:200px; border:1px solid #333333;background-color:Red">
Box
</div>
Resources:
Dollar function source code: here
AddEvent original post: here
Animate function previous post: here
No comments:
Post a Comment