Map video animation helper 2

Change zoom to 175%

by Spencer Smith

HTML

<div class='wrapper'>
	<!-- <h2>South American Shales, Phase 1 &amp; 2</h2> -->
	<h2>南美洲页岩，阶段 1&amp; 2</h2>
	
	<table>
	<tbody>
		<tr><td>贵公司的投资</td><td class="before val"></td></tr><!--Your Investment-->
		<tr><td>投资回报</td><td class="after val hidden"></td></tr><!-- -->
	</tbody>
	</table>
</div>

CSS

*{padding: 0; margin: 0;}
body {background-color: lightgray;text-align: center;}

.wrapper{
	text-align: left;
	background-color: white;
  font-family: Myriad Pro;
  padding: 30px;
  margin: 20px;
	display: inline-block;
}

h2 {
  font-weight: 500;
	font-size: 26px;
	line-height: 34px;
}

.val{
	display: inline-block;
	font-weight: 600;
}

.after{
	opacity: 1;
	transition: all 1s;
}

td{
	/* height: 40px; */
	box-sizing: border-box;
	padding: 8px;
}

table{
	margin-top: 10px;
	font-size: 26px;
}

.after.val{
	/* background-color: lightgreen; */
}

.hidden{
	margin-top: -10px;
  opacity: 0 !important;
}

.stop{
	background-color: crimson;
}

JavaScript

var value = 174800;
var end = 1316200;
var speed = 10;

var initialPause = 1000;

var beforeVal = $('.before.val');
var afterVal = $('.after.val');

beforeVal.text("$" + addCommas(value) + " USD");
afterVal.text("$" + addCommas(end) + " USD");

function increase() {
	value = end - 10000;
  var interval = setInterval(function() {
    value += 107;
    afterVal.text("$" + addCommas(value) + " USD");

    if (value >= end) {
			afterVal.text("$" + addCommas(end) + " USD");
      clearInterval(interval);
			setInterval(stop, 2000);
    }
  }, speed);
}

function showValue(){
  $('.after').removeClass('hidden');
  setTimeout(increase, 100);
}

function stop(){
	$('.wrapper').addClass("stop");
}

function addCommas(x) {
		//return x.toLocaleString();
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

setTimeout(showValue, initialPause);