1

我有以下代码，并且只想在用户滚动超过 1200 像素后才加载对话框。我也试图让 show 变量放慢速度：

$(function() {
$( "#dialog" ).dialog({
    autoOpen: true,
    width: 200,
    height: 200,
    show: 'slide',
    hide: 'puff',
});
});

我正在使用 scrollto 来显示另一个 div，并且它正在工作，因此希望使用相同的功能：

$(window).scroll(function() {
if ($(this).scrollTop() > 300) {
    $('.backtotop').fadeIn(500);
} else {
    $('.backtotop').fadeOut();
}
});

感谢您的帮助，凯尔

4

2 回答 2

1

在您的初始代码集中autoOpen: false。这将阻止对话框在初始化时打开。然后，您可以$("#dialog").dialog("open")使用与第二段代码类似的滚动事件来专门调用。

如果您希望show动作更慢，您可以为动画添加其他选项。一个例子是：

$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        width: 200,
        height: 200,
        show: {
            effect: 'slide',
            duration: 2000 // 2 second duration
        },
        hide: 'puff'
     });
});

查看所有可用选项的对话框 api。
你可以做两件事让它出现一次：

销毁对话框，或删除事件处理程序。

对于两者，您都可以指定在关闭对话框时执行的函数，如下所示：

$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        width: 200,
        height: 200,
        show: {
            effect: 'slide',
            duration: 2000 // 2 second duration
        },
        hide: 'puff',
        close: function () {
            $("#dialog").dialog('destroy'); // this will remove the dialog
        }
     });
});

相反，如果您希望保留对话框，则可以删除事件处理程序。您将像这样修改滚动事件：

$(window).on("scroll.singleDialog", function () {
    if ($(this).scrollTop() > 1400) {
        $("#dialog").dialog("open");
    } else {
        $("#dialog").dialog("close");
    }
});

然后在关闭函数中删除这样的事件：

close : function () {
    $(window).off("scroll.singleDialog");
}

.singleDialog只是我正在使用的一个示例命名空间。您可以为您的特定处理程序使用任何您喜欢的名称。您可以查找 jQuery .on() 和 .off() 以获取更多信息。

于 2013-03-06T16:53:18.363 回答
0

你可以这样做

$(window).scroll(function() {
if ($(this).scrollTop() ==> 1200) {
       $( "#dialog" ).dialog({
         width: 200,
         height: 200,
         show: 'slide',
         hide: 'puff',
     });
}
});

希望这有帮助..

于 2013-03-06T16:57:18.910 回答