You might want to look at jQuery UI Effects for more advanced animation/effects.http://ui.jquery.com/demos/effects_showhide http://docs.jquery.com/UI/Effects
-- Brandon Aaron On Wed, Jan 21, 2009 at 1:22 AM, Daniel Friesen <[email protected]>wrote: > > > // 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 -~----------~----~----~----~------~----~------~--~---
