Sunday, March 14, 2010

show and hide functions in closure

I'm a huge fan of jQuery and while closure is new, its pretty interesting, there are things that are easier to do in jQuery like showing or hiding DOM or DOM manipulations. $ in jQuery is goog.dom.query in closure (they used dojo, i hope they just used sizzle instead). So in order to do something like $("img .oldImages").hide() you have to include third party deps.js
<script src="third_party/closure/goog/deps.js"></script>

We need to import the following:
goog.require('goog.fx');
goog.require('goog.fx.dom');
goog.require('goog.dom.query');
goog.require('goog.fx.AnimationQueue');


function hide(dom){
var anims = new goog.fx.AnimationParallelQueue();
var items = goog.dom.query(dom);
goog.array.forEach(items,function(item){
var anim = new goog.fx.dom.FadeOutAndHide(item, 1000);
anims.add(anim);
});
anims.play();
}

function show(dom){
var anims = new goog.fx.AnimationParallelQueue();
var items = goog.dom.query(dom);
goog.array.forEach(items,function(item){
var anim = new goog.fx.dom.FadeInAndShow(item, 1000);
anims.add(anim);
});
anims.play();
}


Explanation
Use the animation queue (use the one that execute in parallel)
var anims = new goog.fx.AnimationParallelQueue();

Query for our css selector query
var items = goog.dom.query(dom);

Loop through the items create either fadeIn or fadeOut animation on each item, then add that animation to the animation queue.
goog.array.forEach(items,function(item){ ....
anims.add(anim);
});


Play our animation queue
anims.play();

Demo
http://monmonja.com/closure/showHide.html