CSS transition + jQuery CSS

by Alexus fox

HTML

<div class="test1">
  456-678-7890
</div>

CSS

.test1, .test2 {
 position: absolute;
 top: 100px;
    background:transpency;
    float:left;
    padding:10px;
    margin:20px;
    border:1px solid no-outline;
}

.test1 {
    -moz-transition: all 1s linear; /* linear - ease */
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}

.test1.toggledClass {
    color:red;
    border-width:10px;
    font-size:400%;
}

JavaScript

$(function() {

    $('div.test1').on('click', function() {
        $(this).toggleClass('toggledClass');
    });
    
    $('div.test2').on('click', function() {
        var toggled = $(this).data('toggled');
        if (toggled) {
            $(this).animate({
                borderWidth: '1px',
                fontSize: '100%'
            }, 1000, 'linear');
        }
        else {
            $(this).animate({
                borderWidth: '10px',
                fontSize: '300%'
            }, 1000, 'linear');
        }
        $(this).data('toggled', !toggled);
    });
    
});