jQuery: показывает правую часть строки через секунду после загрузки страницы

Question

Я хочу отобразить часть строки в первую секунду на странице и всю строку в секунду (1000 мс).

Пример 1: страница загружена:

2+2

через секунду:

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

Example2:

14 + 10

через секунду:

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

Я бы предпочел решение jQuery, но мне любопытно, можно ли сделать это для любой строки, чтобы:

1) строка может иметь различную длину, математическое уравнение "=" является своего рода разделителем. ("=" - это первая часть правой части строки, которая не отображается, когда страница только что загружена)

2) строка не содержит дополнительных или каких-либо других HTML-тегов, которые помогают манипулировать эффектами видимости /fadeOut для правой части строки.

Answer 1

Вы можете использовать метод разделения JavaScript, чтобы получить все до = символ и затем использовать 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.

Надеюсь, это поможет!

Answer 2

Это может быть полезно для вас

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


})

вот скрипка

Answer 3

Есть много способов сделать это, вот один:

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

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

Answer 4

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/

Answer 5

Я понял, что вы сказали, что у вас все в порядке с использованием jQuery, но ради интереса я решил собрать что-то, что является просто чистым javascript. Я сделал это в следующем JSFiddle: http://jsfiddle.net/U6tVL/2/. Ключевым моментом здесь является использование классов CSS для показа скрытия элементов (как следует):

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

Чтобы добавить в скрипт хорошую анимацию исчезновения / показа, вам необходимо использовать анимацию CSS ( http://www.w3schools.com/css/css3_transitions.asp). В любом случае, я надеюсь, что вы найдете этот ответ интересным!