JavaScript:点击链接应该以惊人的方式消失

Question

我编写了一个 PHP/PostgreSQL/Oracle 脚本供我的工作内部使用，其中链接显示为浅蓝色“标签”，也可以通过单击它们附近的“x”来隐藏:

目前效果很好，我的同事们已经对它印象深刻了。

我从 Stackoverflow 窃取的“标签”的 CSS 外观(因为我自己的 CSS/JS 技能非常有限，而且模仿是最真诚的奉承形式):

a.hide {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.hide:hover {
        background-color: #e7540c;
        color: #E0EAF1;
        border-bottom: 1px solid #A33B08;
        border-right: 1px solid #A33B08;
        text-decoration: none;
}

a.tag {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.tag:hover {
        background-color: #3E6D8E;
        color: #E0EAF1;
        border-bottom: 1px solid #37607D;
        border-right: 1px solid #37607D;
        text-decoration: none;
}

现在我想通过几行 JavaScript 来增强我的脚本，并让“标签”以一种有趣的方式消失，当用户点击它们附近的“x”时(链接当然应该仍然有效)。也许让它们飞起来甚至爆炸？有没有人在这里有想法或可以分享一个不错的技巧？

我不想使用 jQuery，因为我还没有学会。

谢谢你，我希望你的创造力:-) 亚历克斯

Answer 1

纯 javascript 淡出效果是(目前对于非 IE 浏览器..)

var hides = document.getElementsByClassName('hide');

for (var i = 0 ; i < hides.length; i++)
{
    hides[i].onclick = function(evt){
        var el = this.parentNode;
        el.style.opacity=1;
        var el_timeout = setInterval(function(){
            el.style.opacity -= 0.05;
            console.log(el.style.opacity);
          if (el.style.opacity <= 0.05)
          {
              el.parentNode.removeChild(el);
              clearInterval(el_timeout);
          }
        },20);
    }
}

演示:http://jsfiddle.net/gaby/AkA5C/

我已将标签和按钮包装在 <span></span> 中这样您就可以轻松地将两者作为目标。