Does not function effect slide

Does not function effect slide

Im testing some effects in jquery ui, and this is the first, but this doesn´t work.
Here is my code.
Thanks in advance for help me.
This is the index:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>parainformaticos.com</title>
        <link href="jq/ui-darkness/jquery-ui-1.10.4.custom.min.css"
              type="text/css" rel="stylesheet"/>
        <link href="css/main.css" type="text/css" rel="stylesheet"/>

        <script src="jq/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="jq/jquery-ui-1.10.4.custom.min.js"
                type="text/javascript"></script>
        <script src="js/main.js" type="text/javascript"></script>
    </head>
    <body>
        <%-- botón --%>
        <p style="text-align: center">
            <input id="boton" type="button" value="Ingreso de Datos"
                   onclick="verDialog();"/>
        </p>

        <%-- mensaje --%>
        <h3 id="msg" class=" ui-state-error ui-corner-all"></h3>

        <%-- diálogo --%>
        <div style= "display:none">
            <div id="dialogo" title="Ingreso de Datos">
                <table>
                    <tr>
                        <td style="font-style: italic">Apellidos</td>
                        <td>
                            <input type="text" id="apellidos"
                                   maxlength="300" style="width: 300px"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-style: italic">Nombres</td>
                        <td>
                            <input type="text" id="nombres"
                                   maxlength="200" style="width: 300px"/>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
       
    </body>
</html>

And this is the file .js:

 
$(function() {
    $("#boton").button(); // for establecing button jquery
});

function verDialog() {
    $("#dialogo").show("slide",{directions:"right"}, 3000,function(){verDialog2();});
}

function verDialog2() {
    $("#msg").hide();//con hide oculta el mensaje
    $("#nombres").val("");
    $("#apellidos").val("");

    // run the effect
 
$("#dialogo").dialog({// para establecer el diálogo jQuery
    modal: true,
    width: 410,
    buttons: {
        "Cerrar": function() {
            $(this).dialog("close");
        },
        "Aceptar": function() {
            var data = "Bienvenido "
                    + $("#nombres").val() + " "
                    + $("#apellidos").val() + " a JQuery";

            $("#msg").html(data);
            $("#msg").show();
            $(this).dialog("close");
        }
    }
});
}