jQuery Dialog - 动画对话框,从中心向右上方移动

Question

我有一个带有验证插件设置的表单.提交表单并有错误时,我在对话框(非模态)中显示错误字段.

表单可以非常快速地完成(业务要求不断添加字段)并且我在对话框中使用errore'd字段可单击以将窗口滚动到from中的字段并突出显示字段.此时不会关闭该对话框.

此对话框以中心开头,一旦用户开始单击链接,我需要移出用户方式的对话框并突出显示(jQuery效果)下面的字段.

为此,我提出了以下代码,对话框似乎是动画到顶部但不是右边.当我将'right'改为'left'时,它运行正常.

下面是代码和jsbin一起玩 - http://jsbin.com/avigi3/4/

$('a.field').click(function(){
    $(this).closest('.ui-dialog').animate( {
        right : '0', /*left:'0' works fine here*/
        top : $(window).scrollTop()
    }, 'slow');
});

我调试了jQuery.animate代码,这是我的笔记:

1. jQuery.animate()'使用属性的当前值'启动'并逐渐动画到传入的目标值.例如,在调用中,top以对话框的当前最高值开始,并缩小为scrollTop的窗口(浏览器视口的可见顶部).
2. 现在,这就是问题所在.即使对话框是中心对齐的,它的'right'属性也不存在,因为jQuery-ui使用'left'属性来居中(绝对定位)对话框.由于'right'不存在,'right'的动画序列似乎不起作用.

有没有人面对这个问题？我有可能重置对话框的"正确"位置,以便它具有"某些"价值？或者我可以配置jQuery对话框,使其在以编程方式更改位置时动画,而不是通过拖动手动更改.

谢谢,
-Syam

Answer 1

试试这个

$('a.field').click(function(){
    dialog = $(this).closest('.ui-dialog')
    dialog.animate( {
        left: document.width - dialog.width(), // or you might want to use .outerWidth()
        top: $(window).scrollTop()
    }, 'slow');
});