2

s でいっぱいのページがありarticle、それらの間に余白があり、 でラップされて<div id="shell">おり、記事の上にカーソルを合わせると他のすべてがフェードアウトする効果を作成しようとしています。これを行うのはかなり簡単ですが、ある記事から別の記事に移動すると、他のすべてが再びフェードインおよびフェードアウトします。すべての記事をそのままにしてフェードインさせるの#shellではなく、シェルがウィンドウ全体を占有するため、マウスがシェル内にあるときにのみフェードバックし、500 ミリ秒の記事ではフェードバックしないようにします。

$('article').hover(function() {
    if ($('body').hasClass('hover')) {
        $(this).fadeTo(100,1);
    }
    else {
        $('body').addClass('hover');
        $('article').not(this).fadeTo(300, 0.6);
    }
}, function() {
    $(this).fadeTo(300,0.6);
    checkandfade();
});

function checkandfade() {
    setTimeout(function() {
        $(document).mousemove(function(e){
            if (e.target.id == 'shell' && $('body').hasClass('hover')){
                $('article').stop(true,true).fadeTo(100, 1);
                $('body').removeClass('hover');
            }
        });
    },500);
};

それは私がこれまでに持っているものですが、タイムアウトが機能しているとは思いません..時々機能しますが、ほとんどの場合、残りはフェードインしてから再びフェードアウトします。私はこれを完全に間違った方法で行っていますか、それとも私のコードにただの不具合がありますか? アイデアや簡単な解決策があれば、フィードバックをお待ちしています。

ここで私のわずかな進歩に従ってください

4

2 に答える 2

3

次のようなことを試しましたか？

var timeout = 0;
$('article').hover(function() {
    $(this).stop(true, true).addClass('artHovered').fadeTo(100,1);
    fadeOutArticles();
}, function() {
    $(this).removeClass('artHovered');
    fadeOutArticles();
});
function fadeOutArticles(){
    clearTimeout(timeout);
    $('article').not('.artHovered').fadeTo(300,0.6, function(){
        timeout = setTimeout(function(){
            if($('article.artHovered').length==0){
                $('article').stop(true,true).fadeTo(100, 1);
            }
        }, 500);
    });     
}
于 2012-05-08T09:23:37.137 に答える
0

hoverIntentプラグインを使用して、過去に（メニューではありますが）同様のことを行いました。これにより、mouseenter および mouseleave 関数を設定し、それらがトリガーされる正確なタイミングについてタイムアウトを指定することもできます。これをブール変数チェックと組み合わせることもできます。つまり、タイムアウト後に mouseenter で何かを true に設定し、mouseleave で false に設定します (実際には後で延期します)。その後、さまざまなイベント関数でこの bool をチェックして、何かを実行するかどうかを決定できます。

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

于 2012-05-08T09:22:53.483 に答える