0

私が構築しているサイトのフロントページ用に、以下に示すように8つのボタンを持つメニューを作成しました。ホバーされているアイテムとは別に、すべてのメニューアイテムの不透明度を変更するjQueryを少し作成しました。これが私のコードです：

HTML：

<div class="row-fluid" id="home_page_icons">
                <div class="span12">                    
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">News & Events</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Facilities</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Membership</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Pay As You Play</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Health & Fitness</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Exercise Classes</a>
                    <a href="<?php echo JURI::root() . 'index.php/news-events' ?>">Children's Activities</a>
                    <a class="last" href="<?php echo JURI::root() . 'index.php/news-events' ?>">Lane 9 Cafe</a>                                     
                </div>
            </div>

jQuery：

jQuery('#home_page_icons div a').hover( function() {            
        jQuery(this).siblings().fadeTo("fast", 0.3);
        },
        function() {
            jQuery(this).siblings().fadeTo("fast", 1.0);
        })

また、問題を示すためにJSFiddleを作成しました。

http://jsfiddle.net/2zeF8/

メニュー項目にカーソルを合わせると正常に機能します（他のすべての項目の不透明度が変わります）が、メニュー項目間、たとえば左端と右端の間でカーソルを合わせると、間にあるすべての項目のアニメーションがアクティブになり、点滅効果が発生します。

私がこの問題をどのように解決するかについて、誰かが何かアイデアを持っていますか？ありがとう

4

3 に答える 3

2

これを試して：

jQuery('#home_page_icons div a').hover(function () {
    jQuery(this).siblings().stop().fadeTo("fast", 0.3);
},

function () {
    jQuery(this).siblings().stop().fadeTo("fast", 1.0);
});

デモ-http://jsfiddle.net/bBtZp/

stop()前に追加しました。fadeTo()これにより、キューにあるすべてのアニメーションが停止し、現在のアニメーションが再生されます。これはあなたが話していたまばたき効果に乗ることができます。

于 2013-02-04T16:06:49.743 に答える
0

私が見る唯一の問題は、あるアイテムから別のアイテムに非常に速く移動すると、他のアイテムが再びフェードアウトする前に点滅し、少しばかげているように見えることです。しかし、それは簡単な修正です。フェードアウトラインを次のように変更します。

jQuery(this).siblings().stop().fadeTo("fast", 0.3);

これにより、保留中のフェードインが停止します。

于 2013-02-04T16:09:01.050 に答える
0

onこの方法を試してみてください

jQuery('#home_page_icons div').on('mouseenter','a',function () {
        jQuery(this).siblings().stop().fadeTo("fast", 0.3);
}).on('mouseleave','a',function () {
        jQuery(this).siblings().stop().fadeTo("fast", 1.0);
})

div上のすべてのホバーを処理し、アンカー上にある場合にのみ何かを実行します

働くフィドル

編集：はい、stop（）を追加する必要がありますstopメソッド-私は今あなたに何が起こっていたかを見る

于 2013-02-04T16:10:43.940 に答える