jQuery Mobile弹出窗口关闭过渡SlideDown [英] jQuery Mobile Popup Close Transition SlideDown

问题描述

我正在尝试为jQuery Mobile Popup执行向下滑动过渡.我正在使用以下实现:

I am trying to perform a slide down transition for a jQuery Mobile Popup. I am using the following implementation:

  $(element).click(function () {


                    popup =  $("#someproduct").popup({
                        transition: "slideup", shadow: false, corners: false

                    }).popup("open");



                });

                $("#closePopup").click(function () {

                    popup.popup({ transition :"slidedown"},"close");

                  //  var transition = popup.popup("option", "transition");
                   // popup.popup("option", "transition", "slidedown");

                    //popup.popup({transition:"slidedown"});

                  //  
                })

弹出窗口显示为幻灯片，很好.当我按下关闭按钮时，它不会执行向下动画.有任何想法吗！

The popup appears as a slide up which is good. When I press the close button it does not perform a slide down animation. any ideas!

推荐答案

可以在此处找到显示完整答案的相应jsFiddle: jsFiddle示例

A corresponding jsFiddle showing the full answer can be found here: jsFiddle Sample

您将找到示例HTML:

What you will find there will be sample HTML:

<button id="MyButton">Show Popup</button>
<div data-role="popup" id="MyPopup">
    <div class="ui-content">
        Hello from my popup
        <button id="CloseButton">Close</button>
    </div>
</div>

这里还有JavaScript:

And JavaScript here:

jQuery("#MyButton").on("click", function () {
    jQuery("#MyPopup").popup({
        transition: "slideup"
    }).popup("open");
    jQuery("#CloseButton").on("click", function () {
        jQuery.mobile.back();
    });
});

高级是通过使用jQuery Mobile back()方法，将自动发生逆向转换，以隐藏弹出窗口.如果您要通过按钮处理自己的关闭，则同样如此.

The high level is that by using the jQuery Mobile back() method, the inverse transition will occur automatically for the hiding of the popup. If you are handling your own close with a button, the same is also true.

看看jsFiddle并测试它是否适合您.

Have a look at the jsFiddle and test that it works for you.

这篇关于jQuery Mobile弹出窗口关闭过渡SlideDown的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！