D
David Mark
[...]
On closer inspection, those *in/out methods need a first argument,
which is an object specifying various options. Minimum needed to make
sense is a duration as the default is 0.
Q('.myclass').fadeIn({ duration: 500 }).on('click', function() {
E(this).fadeOut({ duration: 500 });
});
At a glance, it appears the other options are ease (easing function--
see API.ease), repeat, revert (reverts altered styles after hide), dir
(reversals and "round trip" transitions), to, from (both percentages)
and fps (frames per second).
The stock reveal effects include "fade", "slide", "drop", "fold",
"zoom", "horizontalblinds" and "verticalblinds" (see API.effects).
And, as with everything in the library, it is trivial to detect
features, allowing for controlled degradation. There are various host
methods and properties that must be present and functional to make
these animation methods work. Those are taken care of behind the
scenes. The calling app only needs to detect the methods on the API
objects. For example, if an enhancement requires fadeIn/out and will
use the OO interface, the gateway would look like this:-
if (E.prototype.fadeIn) { // undefined if not supported
// Cool enhancement goes here
}
It's interesting that libraries like jQuery preach progressive
enhancement, yet there is no way to determine if their methods are
viable in the given environment. Seems a huge contradiction to me.
If you have no way of knowing what will fail, you have no way of
knowing what to present to the user. Present something that fails
unexpectedly (i.e. throws an exception) and the aspiring enhancement
ends up an annoyance at best and a hindrance at worst.
var q = Q('.myclass');
q.fadeIn().on('click', function() {
this.fadeOut();
}, q);
That would fade all of them out on clicking any. The second argument
is the context (the query object in this case).
To fade out one at a time:-
Q('.myclass').fadeIn().on('click', function() {
E(this).fadeOut();
});
On closer inspection, those *in/out methods need a first argument,
which is an object specifying various options. Minimum needed to make
sense is a duration as the default is 0.
Q('.myclass').fadeIn({ duration: 500 }).on('click', function() {
E(this).fadeOut({ duration: 500 });
});
At a glance, it appears the other options are ease (easing function--
see API.ease), repeat, revert (reverts altered styles after hide), dir
(reversals and "round trip" transitions), to, from (both percentages)
and fps (frames per second).
The stock reveal effects include "fade", "slide", "drop", "fold",
"zoom", "horizontalblinds" and "verticalblinds" (see API.effects).
And, as with everything in the library, it is trivial to detect
features, allowing for controlled degradation. There are various host
methods and properties that must be present and functional to make
these animation methods work. Those are taken care of behind the
scenes. The calling app only needs to detect the methods on the API
objects. For example, if an enhancement requires fadeIn/out and will
use the OO interface, the gateway would look like this:-
if (E.prototype.fadeIn) { // undefined if not supported
// Cool enhancement goes here
}
It's interesting that libraries like jQuery preach progressive
enhancement, yet there is no way to determine if their methods are
viable in the given environment. Seems a huge contradiction to me.
If you have no way of knowing what will fail, you have no way of
knowing what to present to the user. Present something that fails
unexpectedly (i.e. throws an exception) and the aspiring enhancement
ends up an annoyance at best and a hindrance at worst.