1

次のコードがあり、ユーザーが 1200px を超えてスクロールした場合にのみダイアログをロードしたいと考えています。また、ショー変​​数を遅くしようとしています：

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

別のdivを表示するためにscrolltoを使用していますが、機能しているため、同じ機能を使用しようとしています:

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

助けてくれてありがとう、カイル

4

2 に答える 2

1

初期コード セットautoOpen: false. これにより、初期化時にダイアログが開かなくなります。$("#dialog").dialog("open")次に、2 番目のコードと同様のスクロール イベントを使用して具体的に呼び出すことができます。

アクションを遅くしたい場合showは、アニメーションのオプションを追加できます。例は次のとおりです。

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

使用可能なすべてのオプションについては、ダイアログ APIを確認してください。
一度表示させるには、次の 2 つの方法があります。

ダイアログを破棄するか、イベント ハンドラを削除してください。

どちらの場合も、次のようにダイアログを閉じるときに実行する関数を指定できます。

$(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 関数で、次のようにイベントを削除します。

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 に答える