// Effects library code
jQuery.extend( jQuery.fx, {
animations: {
partingSea: function(show, options) {
if(show) {
// show
...
} else {
// hide
jQuery(this).each(function() {
jQuery(this).css({
width:
jQuery(this).innerWidth()+'px',
height:
jQuery(this).innerHeight()+'px'
});
var pos = false;
var c = jQuery(this).children();
c.each(function() {
var p = jQuery(this).position();
jQuery(this).css({
left: p.left+'px',
top: p.top+'px'
});
}).each(function() {
jQuery(this).css({position:'absolute'});
});
function fly(i) {
if(i<0) return;
var n = c.eq(i);
n.animate({
left: (pos
?
jQuery(document).width()
:
-n.outerWidth(true) ) + 'px'
}, {
complete: function() {
jQuery(this).hide({animate:false});
fly(i-1);
}
});
// ... code to modify parent
height ...
pos = !pos;
};
fly(c.length-1);
});
}
}
}
});
// App code
$('#foo').hide(); // plain hide
$('#foo').hide('slow'); // hide using simple animation
$('#foo').hide({animate:'partingSea'}); // hide using partingSea animation
$.fx.visibility.animate = 'partingSea';
$('#foo').hide('fast'); // hide using partingSea animation
Still trimmed down a good bit, I didn't even add the code to modify the
parent itself. I used code to grab children, but you could easily
provide a way for the user to provide a selector, like just 'p' tags.
If you're curious about the animation i's just a trimmed example so it's
nowhere complete. In fact I don't have the code that works with the
parent yet. And conceivably the options objects should actually extend
from the inputted options so that things like options.speed get
transmitted to individual effects.
Think of a big block with a number of paragraphs in it. Starting from
the bottom individual paragraps fly outwards left and right and as that
happens the actual container you are hiding shrinks in height. All the
way up until the last paragraph flys off and the parent container
collapses and disappears.
I'm not a scriptaculous person, but even looking at an effects demo page:
http://ndpsoftware.com/ScriptaculousEffectsDemo.php
You can see that there are many conceivable ways to show or hide something.
Actual individual animations wouldn't fit in jQuery itself, but perhaps
in a ui library dedicated to visibility effects.
Sure, it could provide those as plugin functions, but think about it. Do
you honestly think it's a good idea for an effects library to provide 3
new methods for each possible visibility animation it adds?
It's much cleaner if the library just extends an internal list of
possible visibility effects, then either using {animation:...} or by
setting a default animation one can chose from a variety of possible
animations to use.
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://nadir-seen-fire.com]
-Nadir-Point (http://nadir-point.com)
-Wiki-Tools (http://wiki-tools.com)
-MonkeyScript (http://monkeyscript.nadir-point.com)
-Animepedia (http://anime.wikia.com)
-Narutopedia (http://naruto.wikia.com)
-Soul Eater Wiki (http://souleater.wikia.com)
Elijah Insua wrote:
> On Tue, Jan 20, 2009 at 11:04 PM, Daniel Friesen
> <[email protected]>wrote:
>
>
>> Well yes, but that's just a simple example. You could go and setup an
>> animation that involves some extravagant set of movements or color
>> flashing over the simple "squeeze this in this way", provide that as a
>> type of show/hide animation, and then set that as default for .show().
>>
>
>
>
> show us an 'advanced example'?
>
> >
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
