javascript - 使用从顶部滑动的文本更新按钮文本

Question

我试图通过从顶部滑动新文本来更新单击时的按钮文本。它“插入”文本并出现。

我已经设法做到了，但是当背景变暗时，我们可以看到按钮外出现的文本。如何解决？而且我不能降低最高值，否则从 DOM 中删除文本时文本仍然可见。这是我的代码:

var i = 1;
$('a').on('click', function (event) {
    var $el = $(this);
    $('span').animate({
        'top': '+=20px'
    }, 250, function () {
        $el.html('');
        i++;
        $el.prepend('<span class="b" >' + i + '</span>');
        $('.b').animate({
            'top': '+=20px'
        }, 250);
    });
});

CSS:

span {
    position: relative;
}
.b {
    top: -20px;
} 

JSFiddle here

当文本大于容器时，有没有办法剪切文本？像这样:

Answer 1

使用 overflow: 隐藏在 a 标签上。 http://jsfiddle.net/QG4cx/12/

a {
 overflow: hidden;
}