如何淡出并关闭YUI div元素

Question

如何在一页上关闭YUI div元素（模块）的多个实例。下面的代码是一个实例：

YUI({filter: 'raw'}).use('node','anim', function(Y) { 
 
\t \t \t var anim = new Y.Anim({ 
 
\t \t \t \t node: '#panel1', 
 
\t \t \t \t to: { opacity: 0 } 
 
\t \t \t }); 
 

 
\t \t \t var onEnd = function() { 
 
\t \t \t \t var node = this.get('node'); 
 
\t \t \t \t node.get('parentNode').removeChild(node); 
 
\t \t \t }; 
 

 
\t \t \t anim.on('end', onEnd); 
 

 
\t \t \t Y.one('#panel1 .yui3-remove').on('click', anim.run, anim); 
 

 

 
\t \t });

<div id="panel1" class="yui3-module"> 
 
\t <div class="yui3-hd"><h3>Learners Progress</h3> <a title="fade then remove element" class="yui3-remove"><em>x</em></a></div> 
 
\t <div class="yui3-bd" style="border:0px solid black" id="learnerStatus"></div> 
 

 
</div>

如何修改这个代码，这个代码利用DIV的ID与多个div使用。所以，我必须为每个div复制这个。有没有其他方法？

Answer 1

有几十种不同的方式来实现自己的目标，这里就是其中之一：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'); 
}); 

请注意：我在这里使用事件委托，因为这是更“有效”地从许多相似元素（如关闭按钮）“侦听”事件的方法。

阅读更多关于活动委托在这里：http://yuilibrary.com/yui/docs/event/#delegation