0

blocks複数の（div）を表示し、それらすべてを同じ方法で同じオブジェクトと相互作用させたいと思います。

これがjsFiddleデモです

バグをシミュレートする手順

  1. Rollover最初のブロックはアニメーションをトリガーし、オブジェクトを開きます。
  2. 次に、2番目のブロックの場合Rollover、オブジェクトを開いたままにしておきたいのですが、最初にオブジェクトが閉じてから再び開くとどうなりますか。

目的

ブロックをロールオーバーする間、オブジェクトを開いたままにします

将来の世代のために元のコードを追加しました：

$('.object').css({ "top": '-180px' });
$(".cont1,.cont2").hoverIntent(mousein_triger , mouseout_triger);

function mousein_triger(){
        $('.object').stop().animate({"top": "0px"}, 300);
    }
function mouseout_triger() {
        $('.object').stop().animate({"top": "-180px"}, 1000);
}
4

2 に答える 2

1

私はタイマー（グローバル）を使用しましたここにjsfiddleがあります：http： //jsfiddle.net/zL5jZ/

var timer = false;
function mousein_triger(){
        clearTimeout(timer);
        $('.object').stop().animate({"top": "0px"}, 300);
    }
function mouseout_triger() {
        timer = setTimeout(function(){
            $('.object').stop().delay(1000).animate({"top": "-180px"}, 1000);
        }, 400)
}

ブロックをホバリングせずに400ms経過すると、ブロックは自動的に閉じます。それ以外の場合は、希望どおりに開いたままになります。

私は正しいですか？:)

于 2013-01-03T19:42:19.203 に答える
1

うまくいかない理由を説明...

問題は、「stop()」が既に開始されている場合はアニメーションを停止しますが、進行中の場合は遅延を停止しないことです。そのため、ボックスから出て、青いものが動き始めるまで待ってすぐにボックスに戻ると、アニメーションはすぐに停止します。ボックスから出てすぐにボックスに戻ると、待機が終了し、アニメーション全体が終了します。

それを修正するには、@nicolast が提案するようなタイマーを使用します。

于 2013-01-03T19:48:58.243 に答える