Edit in JSFiddle

$('.clickme').click(function() {
    $('.target').animate({
        width: '+=50',
        height: '+=50'
    }, 3000, 'linear', function() {
        console.log('animation complete');
    });
});

$('.clickme-toggle').click(function() {
    $('.target').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 3000, 'linear', function() {
        console.log('animation complete');
    });
});

$('.clickme-special').click(function() {
    $('.target').animate({
        width: 'toggle',
        height: 'toggle'
    }, {
        duration: 3000,
        //easing: 'swing',
        specialEasing: {
            width: 'linear',
            height: 'linear'
        },
        complete: function() {
            console.log('animation complete');
        },
        step: function() {
            console.log('width: ' + $(this).css('width') );
        },
        queue: false
    });
});

<p><span class="clickme js-action">click me for animate</span></p>
<p><span class="clickme-toggle js-action">click me for toggle animate</span></p>
<p><span class="clickme-special js-action">click me for special animate</span></p>
<div class="target">target</div>

.target{
    width:200px;
    height:100px;
    background:#338833;
    opacity:1;
}
.js-action {
    cursor:pointer;
    border-bottom:1px dashed #555;
}