0

ユーザーがクリックしたときに発生するイベントを持つボタンを作成したいと考えています。誰かがこのボタンをクリックすると、スライダーが表示されます。

誰もこのスライダー div を放さない場合、5 秒後に div がトグルする機能が必要ですが、誰かがスライダーを放しても何も起こらないはずです!

誰かがこれを修正できることを願ってフィドルを作成しましたか? http://jsfiddle.net/84nVQ/50/

function handler1() {
    clearTimeout(time);
    $('#volumeChange').attr("class", "selected");
    $('#volume-slider').slider({
        orientation: 'horizontal',
        value: 100,
        max: 1,
        step: 0.01,
        animate: true,
        slide: function(e, ui) {
            alert(ui.value);
        }
    }).show();
}

function handler2() {
    time = setTimeout(function() {
        $('#volumeChange').attr("class", "");
        $('#volume-slider').toggle();
        $('#volume-slider').clearTimeout(time);
    }, 5000);
}

function handler3() {
    clearTimeout(time);
}


$("#volumeChange").on({
    click: function(e) {
        handler1();
        $('#volume-slider').mouseleave(handler2).mouseenter(handler3);
    }
});
4

1 に答える 1

0

未定義の時間変数と clearTimeout の 2 つのエラーがありました。このコードは動作するはずです 

var time = null;

function handler1() {
    clearTimeout(time);
    $('#volumeChange').attr("class", "selected");
    $('#volume-slider').slider({
        orientation: 'horizontal',
        value: 100,
        max: 1,
        step: 0.01,
        animate: true,
        slide: function(e, ui) {
            movie.volume = ui.value;
        }
    }).show();
}

function handler2() {
    time = setTimeout(function() {
        $('#volumeChange').attr("class", "");
        $('#volume-slider').toggle();
        clearTimeout(time);
    }, 5000);
}

function handler3() {
    clearTimeout(time);
}


$("#volumeChange").on({
    click: function(e) {
        handler1();
        $('#volume-slider').mouseleave(handler2).mouseenter(handler3);
    }
});
于 2012-11-06T02:30:17.480 に答える