/

I have made a div be a dialog through jQuery UI. It is empty at the moment, but what I want to do is make it slide from left to center, from outside the window. What it does instead, is it slides like a drawer is opened. I think I am close, but not sure how to do it.

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 {
}

http://jsfiddle/G5RP3/

I have made a div be a dialog through jQuery UI. It is empty at the moment, but what I want to do is make it slide from left to center, from outside the window. What it does instead, is it slides like a drawer is opened. I think I am close, but not sure how to do it.

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 {
}

• javascript
• jquery
• html
• jquery-ui

• I think it will not work with dialog's own show/hide options, you probably will need to make an animation from scratch due to the dialog animation start on dialog's div position – G.Mendes Commented Jul 24, 2014 at 10:36
• You want it to fade in from left to center? – morkro Commented Jul 27, 2014 at 15:20
• Not really. Just slide with 100% opacity. – George Irimiciuc Commented Jul 27, 2014 at 15:21

1 Answer 1

Here's a simple solution:

http://jsfiddle/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
        });
});

When the dialog opens, this code will shift it outside of the screen, then animate the dialog back into place.

If you want to slide the dialog to the right on close, things get a bit more plicated:

http://jsfiddle/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,
                plete: function() {
                    dialog.dialog("close");
                    $("html").css("overflow-x", origOverflow);
                }
            })

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

Here we have to cancel the original dialog close, then trigger the animation, then allow the dialog to close normally. We also have to set the document's overflow-x to hidden so that the horizontal scrollbar doesn't appear.