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/

我已将标签和按钮包装在 中这样您就可以轻松地瞄准两者。

Answer 2

使用 jQuery 效果。非常简单而且看起来很酷

Answer 3

我建议不要在你的应用程序中使用华丽的“爆炸”效果，最终用户使用你的应用程序是因为它解决了一个没有展示的问题。如果你必须有效果，那就使用简单的效果。如果您必须使用此类效果，请使用不同的技术，例如闪光灯。