如何淡出和关闭 YUI div 元素答案

【问题标题】：How to fade out and close YUI div element如何淡出和关闭 YUI div 元素
【发布时间】：2014-11-05 16:04:59
【问题描述】：

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

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);


		});

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

</div>

如何修改此代码以与多个 div 一起使用，因为此代码采用 div 的 id。所以，我必须为每个 div 复制这个。有没有其他办法？

【问题讨论】：

标签： html events panel yui

【解决方案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>

脚本：

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

【讨论】：