jQuery懸停效果觸發其他列表項目

我已經創建了一個我正在建設的網站的首頁的菜單，其中有8個按鈕，如下所示。我已經寫了一點點jQuery，導致所有的菜單項不透明度與正在徘徊的項目不同。這裏是我的代碼：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/

當你懸停在一個菜單項上它工作正常（所有其他r項目會改變不透明度），但是如果您將鼠標懸停在菜單項之間，則說明最左側和最右側之間的所有項目的動畫都會被激活，從而導致閃爍效果。

有沒有人有任何想法ot指示我如何解決這個問題？感謝

來源

2013-02-04 devoncrazylegs

試試這個：

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-04 16:06:49 boz

那很簡單！非常感謝！ :) – devoncrazylegs

@funkyjimbob不用擔心，很高興它有幫助。 – boz

我看到的唯一問題是如果你很快從一個移動到另一個，那麼其他項目在它們再次淡出之前就會閃爍，這看起來有點愚蠢。但這是一個簡單的解決方案。你淡出行更改爲這樣：

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

這將停止任何未決的褪色

來源

2013-02-04 16:09:01

您可能需要使用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); 
})

將處理上的所有懸停嘗試並只做一些東西，如果它在錨點上

working fiddle

編輯：是的，你需要添加停止（）停止方法 - 我現在看到發生了什麼事

來源

2013-02-04 16:10:43 tbwiii

jQuery懸停效果觸發其他列表項目

回答

相關問題