指定サイズまで画像を拡大縮小するJavaScriptの紹介です。

↓以下が実際のソースサンプルです。

▼JavaScript

function expansionWidth( $target, $maxWidth ) {

    disabledButtons( true );

    var $intervalID = setInterval(
        function(){
            changeWidth()
        },
        1
    );

    function changeWidth() {
        var $targetElement = document.getElementById( $target );

        var $width = $targetElement.style.width;

        $width = parseInt( $width.replace( 'px', '' ) );

        if( $width < $maxWidth ){
            $targetElement.style.width = ++$width + 'px';
        }else{

            clearInterval( $intervalID );

            disabledButtons( false );
        }
    }
}

function reductionWidth( $target, $minWidth ) {

    disabledButtons( true );

    var $intervalID = setInterval(
        function(){
            changeWidth()
        },
        1
    );

    function changeWidth() {
        var $targetElement = document.getElementById( $target );

        var $width = $targetElement.style.width;

        $width = parseInt( $width.replace( 'px', '' ) );

        if( $width > $minWidth ){
            $targetElement.style.width = --$width + 'px';
        }else{

            clearInterval( $intervalID );

            disabledButtons( false );
        }
    }
}

function disabledButtons( $disabled ) {
    $buttons = document.getElementById( "sampleButtons" ).getElementsByTagName( "button" );
    for( var $i = 0; $i < $buttons.length; $i++ ) {
        $buttons[$i].disabled = $disabled;
    }
}

▼CSS