jQuery: show the right part of the string in a second after page loads

Question

I want to display the part of the string in the first second on the page and the whole string in a second (1000ms).

Example1: the page loaded:

2+2

in a second:

2+2=4 (=4 added, 2+2 is not moved)

Example2:

14+10

in a second:

14+10=24 (=24 added, 14+10 is not moved)

I would prefer a jQuery solution, but I'm curious if it is possible to do it for any string so that:

1) the string could have different length, the math equation "=" is a kind of delimiter. ("=" is the first of the right part of the string that is not displayed when the page just loaded)

2) the string doesn't contain an additional or any other html tags that help to manipulate visibility/fadeOut effects for the right part of the string.

Answer 1

You can use JavaScript's split method to get everything before the = character and then use setTimeout to replace it with the full string after 1 second as follows:

// The Equation String
var s = '2 + 2 = 4';

// Split the String at the `=` Character
var splitString = s.split('=');

// Add the First Part of the String to the `div`
$('#answer').text(splitString[0]);

// Wait 1 Second and Show the Whole String
setTimeout(function(){
    $('#answer').text(s);
}, 1000);

This will work with any equation that is a string and has the = character as a delimiter.

Here is a JSFiddle Example.

I hope this helps!

Answer 2

HTML:

<div id="container"></div>

JS:

var firstPart = "2+2",
    secondPart = "=4";

$("#container").append(firstPart);
setTimeout(function(){
    $("#container").append(secondPart);
}, 1000);

Fiddle:

http://jsfiddle.net/kQM2w/

Answer 3

Lots of ways to go about this, here's one:

<p class="foo">2 + 2</p>

<script>
window.setTimeout(function(){
    var result = eval($('.foo').html());
    $('.foo').append(' = ' + result);
}, 1000);
</script>

Answer 4

This may be helpful for you

html:

<span id="eq">2+8</span><!-- you can plce here any equation like (16-7)-->

jquery:

$(function(){
var ans = '='+eval($("#eq").html());

    setTimeout(function(){
    $('#eq').html($("#eq").html()+ans);
    }, 1000);


})

here is fiddle

Answer 5

I realized you said you are ok with using jQuery but just for fun I decided to put something together that is just pure javascript. I did this in the following JSFiddle: http://jsfiddle.net/U6tVL/2/. The key here is using css classes to show hide the elements (as follow):

    var original = document.getElementById("math_original");
    original.className = original.className + " hidden";

In order to add a nice fade/show animation to the script you would need to use css animations (http://www.w3schools.com/css/css3_transitions.asp). Anyways, I hope you find this answer interesting!