Jquery对话框滑动

Question

http://jsfiddle.net/G5RP3/

我已经通过jQuery UI创建了一个div对话框.目前它是空的,但我想做的是让它从窗户外面从左到中滑动.相反,它是像抽屉打开一样滑动的.我想我很亲密,但不知道怎么做.

JS

var speed = 2000;
$(document).ready(function () {
    $('#loginmenu').dialog({
        show: {
            effect: 'slide',
            direction: 'left',
            speed: speed

        },
        hide: {
            effect: 'slide',
            direction: 'left',
            speed: speed

        },
        modal: true
    });
});

HTML

<div id="loginmenu"></div>

CSS

#loginmenu {
}

Answer 1

这是一个简单的解决方案:

http://jsfiddle.net/MsS9z/1/

var speed = 2000;
$(document).ready(function () {
    $('#loginmenu')
        .on("dialogopen", function() {
            var widget = $(this).dialog("widget");
            var offset = widget.offset();
            widget
                .css("left", -widget.outerWidth() + "px")
                .animate({ left: offset.left }, { duration: speed });
        })
        .dialog({
            modal: true
        });
});

当对话框打开时,此代码会将其移出屏幕,然后将对话框设置回原位.

如果你想在关闭时向右滑动对话框,事情会变得复杂一些:

http://jsfiddle.net/MsS9z/2/

var speed = 2000;
$(document).ready(function () {
    $('#loginmenu')
        .on("dialogopen", function() {
            var widget = $(this).dialog("widget");
            var offset = widget.offset();
            widget
                .css("left", -widget.outerWidth() + "px")
                .animate({ left: offset.left }, { duration: speed });
        })
        .on("dialogbeforeclose", function() {
            var dialog = $(this);
            var widget = dialog.dialog("widget");

            if (widget.data("dialog-closing") || widget.is(":animated")) {
                widget.data("dialog-closing", false);
                return true;
            }

            widget.data("dialog-closing", true);
            var origOverflow = $("html").css("overflow-x");
            $("html").css("overflow-x", "hidden");
            widget.animate({ left: $(window).width() }, {
                duration: speed,
                complete: function() {
                    dialog.dialog("close");
                    $("html").css("overflow-x", origOverflow);
                }
            })

            return false;
        })
        .dialog({
            modal: true
        });
});

这里我们必须取消原始对话框关闭,然后触发动画,然后允许对话框正常关闭.我们还必须将文档设置为overflow-x,hidden以便不显示水平滚动条.