html - How to fade out and close YUI div element -

html - How to fade out and close YUI div element -

how can close multiple instances of yui div elements (modules) on 1 page. next code 1 instance :

class="snippet-code-js lang-js prettyprint-override">yui({filter: 'raw'}).use('node','anim', function(y) { var anim = new y.anim({ node: '#panel1', to: { opacity: 0 } }); var onend = function() { var node = this.get('node'); node.get('parentnode').removechild(node); }; anim.on('end', onend); y.one('#panel1 .yui3-remove').on('click', anim.run, anim); }); class="snippet-code-html lang-html prettyprint-override"><div id="panel1" class="yui3-module"> <div class="yui3-hd"><h3>learners progress</h3> <a title="fade remove element" class="yui3-remove"><em>x</em></a></div> <div class="yui3-bd" style="border:0px solid black" id="learnerstatus"></div> </div>

how can modify code utilize multiple divs code takes id of div. so, have replicate each div. there other way?

there dozens of different ways accomplish goal , here 1 of them: http://jsfiddle.net/2rw84usl/

html:

<div class="items"> <div class="item"> <h3>learners progress</h3> <span class="remove">close</span> </div> <div class="item"> <h3>learners progress</h3> <span class="remove">close</span> </div> </div>

script:

yui().use('node','anim', function(y) { var anim = new y.anim({ to: { opacity: 0 }, duration: 0.5, on : { end : function() { var node = this.get('node'); node.get('parentnode').removechild(node); } } }); y.one('.items').delegate('click', function(e) { anim.set('node', e.target.get('parentnode')).run(); }, '.remove'); });

please note: i'm using event delegation here because more effective way "listen" events many similar elements (such close buttons).

read more event delegation here: http://yuilibrary.com/yui/docs/event/#delegation

html events panel yui