0

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
            });
});

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

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

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

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

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

4

2 に答える 2

2

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

コード(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);
    });
});​
于 2012-08-23T07:39:02.857 に答える
1

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

  1. 前者を止めることができるので、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();
    });
    
  2. アニメーションを続行するか停止するかをコードに指示するフラグを設定すると、ホバーインとホバーアウトでアニメーションを変更できます。これが例です。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();
    });
    
于 2012-08-23T08:54:09.097 に答える