Hello there,
I have this counter which counts + 1 every time somebody shares content from the site. When it happens, the social icon that was clicked will bounce.
It works in Firefox,Chrome, IE8, and Opera, however the bouncing animation is wrong in opera.
$.fn.countExternal = function(animSpeed, num) {
// for each counter
this.each(function(){
// select all the digit containers
var span = $(this).children();
// count the num of digit containers
var len = $(span).length;
// get the current count
u = $(span).text();
// copy variable and add increment(s)
v = num + '';
// foreach digit container...
for (i=v.length - 1; i >= 0; i--) {
// ...check which digits are not affected by the increment(s)
if (v.charAt(i) == u.charAt(i)) {
break;
}
}
// slice from the total number of digit containers the digits containers which needs updating.
slce = len - (v.length - (i + 1))
var updates = $(span).slice(slce);
// loop through each digit container and fade out ...
$(updates).fadeTo(animSpeed, 0,function(){
$(updates).each(function(index){
f = i + 1 + index;
// ...then pick the right digit and update the digit...
$(this).text(v.charAt(f));
// ...before fading back in. Cycle complete.
$(this).fadeTo(animSpeed, 1);
});
});
});
};
}) (jQuery);
Demo (NSFW) is here (look underneath the social sharing icons).
Any idea how I can solve the IE, and possibly the Opera compatibility problem?
Thank you for your time.
