3

そのため、スライドドアスタイルのアニメーションがあります。これは、現在、マウスをボックスの上に置いたときに起動します（私の例を以下に示します）。マウスがdivの上にホバーするとすぐに起動するのではなく、実際には、マウスがdivで停止したときにのみホバーアニメーションが発生するようにします。これは、Chromeウェブストアでアプリコンテナの1つでマウスを停止したときと同じです。 （https://chrome.google.com/webstore/category/home）

私の現在の例 http://jsfiddle.net/fvXgK/

編集：さらに明確にするために、このページには複数のセルが表示されます。

あなたが提供できるどんな助けにも感謝します!!

4

6 に答える 6

3

私のアドバイスは、ホバーイベントを変更することです。ホバー時にマウスの座標を取得し、50〜100ミリ秒でタイムアウトを開始します。タイムアウトを使用して、現在のマウス座標を元の座標セットと比較します。それらが同じで、アニメーションが実行されていない場合は、アニメーションを実行します。これは、何を試すことができるかについての大まかなアイデアです。

編集：タイムアウトを停止するonmouseoutイベントを作成することも忘れないでください。

于 2012-07-24T16:02:49.193 に答える
3

jqueryのhoverintentプラグインを試すことができます。

http://cherne.net/brian/resources/jquery.hoverIntent.html

于 2012-07-24T16:04:29.317 に答える
2

使いやすいこのフィドルを参照してください。

http://jsfiddle.net/pbaXa/

于 2012-07-24T16:28:02.357 に答える
1

これは私がそれを行う方法です...それはただ簡単です：単純で単純です：

$('.smallCell.slidedown').hover(function() {
    $(".overlay", this).delay(1000).queue(function(){
    $(this).animate({
        top: '-260px'
    }, {
        queue: false,
        duration: 300
    });


    });
}, function() {
    $(".overlay", this).animate({
        top: '0px'
    }, {
        queue: false,
        duration: 300
    });
});

また、これは自明です。1秒遅れて、関数をキューに入れます。

于 2012-07-24T16:09:38.970 に答える
1

これにsetTimeoutを使用して、要素の保存された「ホバー状態」と比較できます。複数のセルを使用している場合、私の例はホバー状態を保存するための最良の方法ではないかもしれませんが、その概念は依然として有効です。

var TIME_UNTIL_SLIDE = 1000;

var isHovering = false;
var hovertimer;

$('.smallCell.slidedown').hover(function() {
    isHovering = true;
    var $this = this;
    hovertimer = setTimeout(function(){
        if(isHovering) {
             $(".overlay", $this).stop().animate({
                top: '-260px'
            }, {
                queue: false,
                duration: 300
            });
        }
    }, TIME_UNTIL_SLIDE);

}, function() {
    isHovering = false;
    $(".overlay", this).stop().animate({
        top: '0px'
    }, {
        queue: false,
        duration: 300
    });
});

表示場所：http ： //jsfiddle.net/fvXgK/16/

于 2012-07-24T16:15:35.890 に答える
1

たぶんあなたはこのプラグインを試してみるべきです：

http://www.richardscarrott.co.uk/posts/view/jquery-mousestop-event

使いやすく、例はまさにそこにあります！

于 2012-07-24T16:20:10.617 に答える