Cuadro de diálogo de Jquery: no se desvanece antes de cerrar

Question

Tengo div (cuadro) en mi página y estoy usando este script para mostrar div como cuadro de diálogo. Dentro de ese div tengo un hiperenlace, al hacer clic en el hipervínculo quiero atenuar el cuadro de diálogo y cerrarlo. El contenido del diálogo se desvanece, pero el borde del cuadro de diálogo permanece igual. Si agrego $ ("# box"). Dialog ('close') a la función click después de fadeto no hay ningún efecto ... simplemente cierra el cuadro de diálogo por completo. ¿Alguna ayuda? usando jquery-ui-1.7.2

<script type="text/javascript"> 
      $(document).ready(function(){ 
       $("a#later").click(function() { 

       $("#box").fadeTo('slow', 0); 
       }) 
      }); 
      $(function() { 
       $("#box").dialog({ 
        autoOpen: true, 
        width: 500, 
        modal: true, 

       }); 
      }); 
</script> 

Answer 1

¿Qué hay de

$("#box").fadeTo('slow', 0, function() { 
    $("#box").dialog('close'); 
}); 

¿Desea que ocurra lo próximo después de que finalice el fundido, correcto?

Answer 2

probar esto, podría funcionar:

$("a#later").click(function() { 
    $("#box").fadeTo('slow', function() { 
     $("#box").dialog("close") 
    }); 
}); 

Answer 3

Prueba esto:

  $(function() { 
       $("#box").dialog({ 
        autoOpen: true, 
        width: 500, 
        modal: true, 
        show: 'blind', 
        hide: 'fade' 
       }); 
      }); 

Salida el ejemplo aquí: Animated Dialog

Answer 4

Probé el código de algunos Richard a continuación y funciona. Puede proporcionar el nombre del efecto como una cadena:

$("#dialog").dialog({ 
    hide: "fadeOut" 
}); 

o puede proporcionar un hash si tiene opciones adicionales, tales como:

$("#dialog").dialog({ 
    hide: {effect: "fadeOut", duration: 5000} 
}); 

Answer 5

este es mi código:

$(function() { 
$("a#link-id").click(function(){$(".ui-dialog").fadeOut(2000)})}); 

esto está funcionando script :). No necesita hacer clic en el botón 'cerrar'.