Question

我通过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，以便水平滚动条不会出现。

Jquery对话框滑动

1 个答案: