2

そのため、ユーザーが一定時間コンテナの上にカーソルを置く小さな jquery アニメーションを設定しています。これにより、コンテナが分割され、内部の情報が表示されます。

マウスがコンテナに入るとすぐにアニメーションを開始したくないので、アニメーションに a を付けdelay()ます。アニメーションはすぐには開始されません。

ただし、問題があります。領域にすばやくカーソルを合わせると、アニメーションが開始され、非常に速く開始されます。

ここに説明するjsfiddleがあります... http://jsfiddle.net/Rh96d/

ユーザーがマウスを青色の領域に一定時間保持しない限り、アニメーションを再生したくありません。この例では、ユーザーが領域からマウスを離してもアニメーションが再生されますが、これは発生すべきではありません。

私が十分に明確でない場合は申し訳ありません。これを機能させる方法がわかりません...

4

2 に答える 2

2

私はjQuery hoverIntent プラグインの大ファンです。

これはフィドルの実装です。

プラグインを含めた後、スクリプトは次のように変更されます

function hoverIn () {
    $('#one').stop().animate({marginTop:'-250px'});
    $('#two').stop().animate({marginTop:'500px'});
}
function hoverOut () {
    $('#one').stop().animate({marginTop:'0px'});
    $('#two').stop().animate({marginTop:'0px'});
}
var config = {
    over: hoverIn,
    timeout: 0,
    out: hoverOut,
    interval: 600
};

$('#main').hoverIntent(config);
于 2012-11-27T17:43:21.103 に答える
1

解決例: http://jsfiddle.net/Rh96d/8/

ここでは、500 ミリ秒経過後にトリガーする関数を設定しています。マウスが領域を離れると、終了アニメーション コードが実行されます。

JavaScript

var myTimeout;
$('#main').mouseenter(function() {
    myTimeout = setTimeout(function() {
        $('#one').stop().delay(600).animate({marginTop:'-250px'});
        $('#two').stop().delay(600).animate({marginTop:'500px'});
        },function () {
    }, 5500);
}).mouseleave(function() {
    clearTimeout(myTimeout);
    $('#one').stop().animate({marginTop:'0px'});
    $('#two').stop().animate({marginTop:'0px'});
});

$('#main').mouseleave(function() {
    clearTimeout(myTimeout);
    $('#one').stop().animate({marginTop:'0px'});
    $('#two').stop().animate({marginTop:'0px'});
});​

</p>

于 2012-11-27T17:41:27.917 に答える