python_abs_function

by JoeQuery

HTML

<button id="run">Run Visualization</button>

<div id="example">
    <div class="expression">
        abs(<span class='neg'>-</span><span class='val'>5</span>)
        <span class="equals">&rArr;</span>
        <span class="answer">5</span>
    </div>
    <div class="expression">
        abs(<span class='neg'></span><span class='val'>9</span>)
        <span class="equals">&rArr;</span>
        <span class="answer">9</span>
    </div>
    <div class="expression">
        abs(<span class='neg'>-</span><span class='val'>3.5</span>)
        <span class="equals">&rArr;</span>
        <span class="answer">3.5</span>
    </div>
</div>

CSS

body{
    background-color: #eee;
    font-size: 21px;
    font-family: 'Lucida Console';
    height: 200px;
}

span.equals{
    display: none;
}

span.answer{
    display: none;
}

span.val{
    border: 0px solid #ff0000;
}

#run{
    display: block;
    margin-bottom: 20px;
}

JavaScript

$(function(){
    var html_contents = $('#example').html();
    
    var see_example = function(){
        $('#example').html(html_contents);
        var $expressions = $('.expression');
        $expressions.each(function(){
            var $self = $(this);
            setTimeout(function(){
                $self.find(".val").animate({color: "#ff0000", borderWidth: 1}, 1000, function(){
                    $self.find('.equals').delay(500).fadeIn(1000, function(){
                        $self.find('.answer').delay(500).fadeIn(1000); 
                    });
                });    
            }, 4000*$self.index())
        }); 
    };
    
    $('#run').on('click', function(){
       see_example(); 
    });
    
    
});