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

Question

我试图通过从顶部滑动新文本来更新点击按钮文本。它推动＆＃34;文字并出现。

我设法做到了，但当背景较暗时，我们可以看到文字出现在按钮外。怎么解决？并且我无法降低最高值，因为否则文本在从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：隐藏在标签上。 http://jsfiddle.net/QG4cx/12/

a {
 overflow: hidden;
}