如何淡出並關閉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