javascript - 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，这样水平滚动条就不会出现。