// EFECTOS PERSONALIZADOS


// Ejecutar cuando el html este cargado
$(document).ready(function(){
    efectos();
});


function efectos(){
    var caja = $('#caja');

    $('#mostrar').hide('fast')

    //Mostrar y Ocultar Caja
    $('#activar').click(function(){
        caja.fadeToggle('fast');
    });

    //Efectos personalizados
    $('#animar').click(function(){
        caja.animate({
                marginLeft: '500px',
                fontSize:   '40px',
                height:'120px'
        },'fast')
            .animate({
                marginTop: '500px',

        },'fast')
            .animate({
                marginLeft: '0px',

        },'fast')
            .animate({
                marginTop: '0px',
        },'fast');
    });
}