javascript - How to animate and change a slider counter position in a clean way? -

i have swiper slider , counter position "1/10". change current slide number (the 1) animation. know how replace number animation, it's story:

as can see on gif, it's working nicely if click moderately on slider, when double-triple-or-crazy click on next link, totally breaks counter, due clone made in gif example.
know how can in better way?

i made jsfiddle, working first count change only:
— http://jsfiddle.net/asb39sff/1/

// init var $c_cur = $("#count_cur"),     $c_next = $("#count_next");  tweenlite.set($c_next, {y: 12, opacity: 0}, "count");   // change counter function function photos_change(swiper) {     var index = swiper.activeindex +1,         $current = $(".photo-slide").eq(index),         dur = 0.8,         tl = new timelinelite();      // test     tl.to($c_cur, dur, {y: -12, opacity: 0}, "count")       .to($c_next, dur, {y: 0, opacity: 1}, "count")      //$c_cur.text(index);     //$c_next.text(index + 1); } 

while agree @tom sarduy approach , recommend since one-time creation of html elements provide idea, here what have been able create quickly.

css changes:

.counter .next, .counter .count {     position:absolute; } .counter .next {     transform:translatey(-12px);     left:0; } 

javascript changes:

//added before [photos_change] method var counter = $('.counter'); var currentcount = $('<span class="count">1<span/>'); counter.append(currentcount); //  //and inside [photos_change] event handler var prevcount = $('.count'); currentcount = $('<span class="count next">' + index + '<span/>'); counter.append(currentcount); tweenmax.to(prevcount, dur, {     y: -12,     opacity: 0,     oncompleteparams: [prevcount],     oncomplete: function (prevcount) {         prevcount.remove();     },     ease: power2.easeout }); tweenmax.fromto(currentcount, dur, {     y: 12,     opacity: 0 }, {     y: 0,     opacity: 1,     ease: power2.easeout }); // 

so guess take whichever approach i.e. one-time creation of html elements on load or on click 1 proposing.

apologies ugliness of code, cooked in hurry. hope helps in way though.