CSS transition + jQuery CSS

by molokoloco

HTML

<div class="test1">
    CSS
</div>

<div class="test2">
    JAVASCRIPT
</div>

CSS

.test1, .test2 {
    background:orange;
    float:left;
    padding:10px;
    margin:20px;
    border:1px solid red;
}

.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 {
    border-width:10px;
    font-size:300%;
}

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