CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Vinz243
Vinz243

Reputation: 9948

Updating button text with sliding text from top

I am trying to update a button text on click by sliding the new text from the top. It "pushes" the text and appear.

I've managed to do that, but when the background is darker, we can see the text appearing outside the button. How to solve that ? And i can't lower the top value since otherwise the text is still visible when it is removed from the DOM. Here is my code:

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

Is there a way to cut the text when it is bigger than the container ? Like so: example

Upvotes: 0

Views: 29

Answers (1)

JohanVdR
JohanVdR

Reputation: 2878

Use overflow: hidden on the a tag. http://jsfiddle.net/QG4cx/12/

a {
 overflow: hidden;
}

Upvotes: 1

Related Questions