jquery - 説明されているjQuery関数をホバーで停止し、mouseleaveで再開します

Question

func1ドキュメント対応で正常に動作するjQuery関数があります。

$(document).ready(function ()
{
   //func1 description is here
   ...
   $(func1);
}

また、私は持っています

$(function ()
{
            $("#my-ul a").hover(function ()
            {
               //do something on my-ul a hover
            });
            $("#my-ul a").mouseleave(function ()
            {
               //do something on my-ul a mouseleave
            });
});

そしてそれはうまくいきます。

私も欲しいのは、（あなたがまったくホバリングしなかったように）停止func1しmy-ul a hoverて再開することです。my-ul a mouseleave

スタックオーバーフローを閲覧しても、答えは得られませんでした。.stop（）関数を使用する必要があると思いますが、私の例では適切に使用できませんでした。

ありがとうございました。

更新：これはjsFiddleの例であり、リンクにカーソルを合わせたときにテキストの変更を停止し、onmouseleaveと同じ方法で変更を開始したいと思います。

score 2 · Accepted Answer

キャンセルできませんでした。代わりdelayに使用する必要がありますsetTimeout。serInterval

コード（THE DEMO）：

$(document).ready(function () {
    var terms = ["span_aaa", "span_bbb", "span_ccc", "span_ddd", "span_eee", "span_fff"],
        i = 0,
        intervalId = null;

    function rotateTerm() {
        $("#text-content").fadeOut(200, function () {
            $(this).text($('#text-slider .' + terms[i]).html() + i).fadeIn(200);
        });
        $("#title-content").fadeOut(200, function () {
            $(this).text($('#title-slider .' + terms[i]).html() + i).fadeIn(200);
            i == terms.length - 1 ? i = 0 : i++;
        });
    }
    rotateTerm();
    intervalId = setInterval(rotateTerm, 2000);
    $('#stop-on-hover').hover(function () {
        if (intervalId) {
            clearInterval(intervalId);
        }
    }, function () {
        intervalId = setInterval(rotateTerm, 2000);
    });
});

score 1 · Accepted Answer

私は2つのオプションを提案することができます：

前者を止めることができるので、setTimeout代わりにJavascriptを使用してください。delayこれがどのように実行されるかの例です。DEMOを参照してください。

var thread = null;

function rotateTerm() {
    var ct = $("#text-content").data("term") || 0;

    function fadeIn() {
        $("#text-content").data("term", ct == terms.length - 1 ? 0 : ct + 1).text($('#text-slider .' + terms[ct]).html() + ct).fadeIn();
        $("#title-content").text($('#title-slider .' + terms[ct]).html() + ct).fadeIn();
    }

    function fadeOut(callback) {
        $("#text-content").fadeOut(200);
        $("#title-content").fadeOut(200, callback);
    }

    fadeIn();
    thread = window.setTimeout(function() {
        fadeOut(rotateTerm);
    }, 2000);
}

rotateTerm();
$("a#stop-on-hover").hover(function() {
    thread && window.clearTimeout(thread);
}, function() {
    rotateTerm();
});

アニメーションを続行するか停止するかをコードに指示するフラグを設定すると、ホバーインとホバーアウトでアニメーションを変更できます。これが例です。DEMOを参照してください。多少のちらつきがありますが、コードをいじって正しく機能させることができます。

var animate = true;

function rotateTerm() {
    var ct = $("#text-content").data("term") || 0;

    function fadeIn() {
        $("#text-content").data("term", ct == terms.length - 1 ? 0 : ct + 1).text($('#text-slider .' + terms[ct]).html() + ct).fadeIn();
        $("#title-content").text($('#title-slider .' + terms[ct]).html() + ct).fadeIn();
    }

    function fadeOut(callback) {
        $("#text-content").fadeOut(200);
        $("#title-content").fadeOut(200, callback);
    }

    fadeIn();

    window.setTimeout(function() {
        if (animate) {
            fadeOut(rotateTerm);
        }
    }, 2000);
}

rotateTerm();
$("a#stop-on-hover").hover(function() {
    animate = false;
}, function() {
    animate = true;
    rotateTerm();
});

jquery - 説明されているjQuery関数をホバーで停止し、mouseleaveで再開します

2 に答える 2

Related

Reference