Geek Answers Handbook

JQuery: show right side of line per second after page load

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

Example1: loaded page:

2+2

per second:

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

Example 2:

14 + 10

per second:

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

I would prefer a jQuery solution, but I'm curious if this can be done for any string so that:

1) the line can have different lengths, the mathematical equation "=" is a kind of separator. ("=" is the first of the right side of the line that does not appear when the page loads)

2) the line does not contain additional or any other html tags that help to manipulate the effects of visibility / fadeOut for the right side of the line.

+4
5

JavaScript split, =, setTimeout, 1 :

// 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);

, = .

JSFiddle.

, !

+1

HTML:

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

JS:

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

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

:

http://jsfiddle.net/kQM2w/

+1

, :

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

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

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);


})

fiddle

+1

, , jQuery, - , javascript. JSFiddle: http://jsfiddle.net/U6tVL/2/. css ( ):

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

fade/show script, css (http://www.w3schools.com/css/css3_transitions.asp). , , !

+1

More articles:


All Articles