0

私は前のトピックで同じことを尋ねましたが、誰かが私がこれのために別のものを開くべきであると言いました。だからここに行く：

ナビゲーションの背後でリボンをアニメーション化していますが、問題は、開始位置に戻って次の要素に戻るのではなく、アニメーション化された要素を前の場所に保持したいということです。私はこれを達成することができましたが、hoverIntentを使用しませんでした。これで、リボンはナビゲーション上のすべての動きを検出します。どうすればこれを防ぐことができますか？

私が間違っている場合は訂正してください。ただし、delay（）とsetTimeout（）は、停止に関係なく最後のアニメーションを起動するため、この時点では意味がありませんでした。マウスが通り過ぎたときに、mouseenterが起動しないようにするにはどうすればよいですか？たぶん、マウスがホバリングブロック上で300ミリ秒以上安定している場合のように、マウスオーバーのif句はありますか？

注：noConflictスクリプトを実行しているため、j=$です。

function rbHover(){


    j("#nav li a")
        .on('mouseenter', function() {

        var l = j(this).parent().position().left;
        var w = j(this).parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

            j("#ribbon").stop('ribbon', true, true).animate({
                "left" : l,
                "width" : w }, {
                    duration: 600,
                    easing: 'swing', 
                    queue: 'ribbon'
                 }).dequeue('ribbon');

            j(".rib-left").stop('rib-left', true, true).animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'linear', 
                    queue: 'rib-left'
                 }).dequeue('rib-left');

            j(".rib-right").stop('rib-right', true, true).animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'linear', 
                    queue: 'rib-right'
                 }).dequeue('rib-right');
        })

        .on('mouseleave', function() {

        var l = j(".active").parent().position().left;
        var w = j(".active").parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

            j("#ribbon").stop('ribbon', true).delay(300, 'ribbon').animate({
                "left" : l,
                "width" : w }, {
                    duration: 600,
                    easing: 'swing', 
                    queue: 'ribbon'
                 }).dequeue('ribbon');

            j(".rib-left").stop('rib-left', true, true).delay(300, 'rib-left').animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'linear', 
                    queue: 'rib-left'
                 }).dequeue('rib-left');

            j(".rib-right").stop('rib-right', true, true).delay(300, 'rib-right').animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'linear', 
                    queue: 'rib-right'
                 }).dequeue('rib-right');
        });
}

あなたは私のウェブサイトを見つけることができます：www.egegorgulu.com

4

1 に答える 1

3

これを試して...

function rbHover(){
    var timeoutID = 0;
    var hoverInterval = 300;

    j("#nav li a")
        .on('mouseenter', function() {
            clearTimeout(timeoutID);
            timeoutID = setTimeout(mouseEnter, hoverInterval, this);
        })
        .on('mouseleave', function() {
            clearTimeout(timeoutID);
            timeoutID = setTimeout(mouseLeave, hoverInterval);
        });

    function mouseEnter(el) {
        var l = j(el).parent().position().left;
        var w = j(el).parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

        j("#ribbon").animate({
            "left" : l,
            "width" : w }, {
            duration: 600,
            easing: 'swing', 
            queue: 'ribbon'
        }).dequeue('ribbon');

        j(".rib-left").stop().animate({
            "border-right-width": rbw,
            "border-left-width": rbw,
            "border-top-width": rbh,
            "border-bottom-width": rbh,
            "bottom": "-" + (2*rbh) + "px"}, {
                duration:600,
                easing: 'linear', 
                queue: 'rib-left'
            }).dequeue('rib-left');

        j(".rib-right").stop().animate({
            "border-right-width": rbw,
            "border-left-width": rbw,
            "border-top-width": rbh,
            "border-bottom-width": rbh,
            "bottom": "-" + (2*rbh) + "px"}, {
                duration:600,
                easing: 'linear', 
                queue: 'rib-right'
            }).dequeue('rib-right');
    }

    function mouseLeave() {
        var l = j(".active").parent().position().left;
        var w = j(".active").parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

        j("#ribbon").stop('ribbon', true).animate({
            "left" : l,
            "width" : w }, {
            duration: 600,
            easing: 'swing', 
            queue: 'ribbon'
        }).dequeue('ribbon');

        j(".rib-left").stop('rib-left', true, true).animate({
            "border-right-width": rbw,
            "border-left-width": rbw,
            "border-top-width": rbh,
            "border-bottom-width": rbh,
            "bottom": "-" + (2*rbh) + "px"}, {
                duration:600,
                easing: 'linear', 
                queue: 'rib-left'
            }).dequeue('rib-left');

        j(".rib-right").stop('rib-right', true, true).animate({
            "border-right-width": rbw,
            "border-left-width": rbw,
            "border-top-width": rbh,
            "border-bottom-width": rbh,
            "bottom": "-" + (2*rbh) + "px"}, {
                duration:600,
                easing: 'linear', 
                queue: 'rib-right'
            }).dequeue('rib-right');
    }
}

mouseenterイベントに間隔を追加したので、起動する前に待機します。それに合わせてhoverIntervalを変更します。

于 2012-02-01T17:02:15.733 に答える