jQuery淡入淡出/淡化其他列表元素，當我有一個懸停時，我在那裏90％..？

Question

我有一個無序列表，其中可能有30個項目。當這些物品中的一個懸停時，剩餘的物品將褪色至30％，而懸掛物品則保持100％。當你從列表中移開時，它們都會褪去100％，我已經管理好了。

當您從一個項目移動到另一個項目時，其他列表項會逐漸回退到100％，然後回落到30％。除非用戶離開整個列表，否則我希望他們保持在30％。

我在每個列表項上使用hoverIntent插件。我還用jQuery爲當前列表項添加一個類，這樣我就可以淡化剩下的東西，並在你離開時刪除它。我在jQuery Cookbook站點上使用了一個等待函數（http://docs.jquery.com/Cookbook/wait）

你能找到我嗎？

這裏是我到目前爲止的代碼：

$.fn.wait = function(time, type) { 
    time = time || 300; 
    type = type || "fx"; 
    return this.queue(type, function() { 
     var self = this; 
     setTimeout(function() { 
      $(self).dequeue(); 
     }, time); 
    }); 
}; 

$("#sites li:not(#sites li li)").hoverIntent(function(){ 
    $(this).attr('class', 'current'); // Add class .current 
    $("#sites li:not(#sites li.current,#sites li li)").fadeTo("slow", 0.3); // Fade other items to 30% 
    },function(){ 
    $("#sites li:not(#sites li.current,#sites li li)").wait().fadeTo(600, 1.0); // This should set the other's opacity back to 100% on mouseout 
    $(this).removeClass("current"); // Remove class .current 
}); 

*顯然，這是一個$（文件）。就緒內（函數（）

誰能幫我請

非常感謝

Answer 1

這聽起來很有趣，所以我實現了它。從外觀上看，你的CSS選擇器可以簡化。我認爲你只想讓最上面的列表項淡入淡出，但是從這個例子中不清楚。本示例突出顯示了最上面的節點並正確進行了衰減。我認爲這是你要去的效果，但我不是100％肯定的。我沒有使用wait（）功能，因爲我不確定它對你的功能。

從本質上講，它聽起來像是你遇到的問題是，當你還沒有離開列表時，你正在淡入物品。當您完全離開列表時，您只想淡入列表或其他列表項目。不要對該部分使用hoverIntent，並處理整個無序列表上的淡入淡出，應該很好。

的例子：http://jsbin.com/usobe

鼓搗出的例子：http://jsbin.com/usobe/edit

<ul id="sites"> 
    <li> site 1 
    <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul> 
    <li> site 2 
    <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul> 
    <li> site 3 
    <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul> 
    <li> site 4 
    <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul> 
    <li> site 5 
</ul>  

<script> 
$(function() { 

$("#sites").hover(
    function() {}, 
    function() {   
     $('#sites>li').fadeTo("fast", 1.0); 
    } 
); 

$("#sites>li").hoverIntent(
    function(){ 
     $(this).attr('class', 'current'); // Add class .current 
     $(this).siblings().fadeTo("fast", 0.3); // Fade other items to 30% 
     $(this).fadeTo("slow", 1.0); // Fade current to 100% 

    }, 
    function(){    
     $(this).removeClass("current"); // Remove class .current 
     $(this).fadeTo("fast", 1.0); // This should set the other's opacity back to 100% on mouseout 
    }); 
}); 

</script> 

Answer 2

ID需要看你的HTML，以便更好地理解這個問題，但對於這樣的事情：

在我看來，你的問題在於你在列表中的每個項目上淡入淡出，你應該做的是： 1）如果從整個列表中滑出，將其淡入 2）作爲用戶從一個項目移動到另一個項目，將鼠標懸停的項目淡化爲可見，其他項目不可見。

這將很容易與自定義插件 - 再次，ID需要看到的HTML。如果沒有看到它的存在，或者至少是html，那麼它就會變得很重要。

Answer 3

你很近，這應該是一個簡單的修復。在您的外出功能檢查首先看鼠標是否完全離開UL。如果有，然後處理你的淡入。如果沒有，那麼讓它們消失，並簡單地改變你離開的李和你正在進入的李的褪色。

Answer 4

如何做這樣的事情：
測試它雖然簡短，但是我認爲它達到你正在尋找的效果。

jQuery(function($){ 
    var $ul = $("ul#sites") 

    $ul.hover(function(){ 
    $("li", $ul).stop().fadeTo("fast", 0.3) 

    $("li", $ul).hover(function(){ 
     $(this).stop().fadeTo("fast", 1.0) 
    },function(){ 
     $(this).stop().fadeTo("fast", 0.3) 
    }) 
    },function(){ 
    $("li", $ul).stop().css("opacity", 1.0) 
    }) 

}) 

Answer 5

這裏是更簡單的解決方案：

$("ul#sites > li").fadeTo("fast", 0.3); 
$("ul#sites > li").hover(
    function() { $(this).fadeTo("fast", 1.0); }, 
    function() { $(this).fadeTo("fast", 0.3); } 
); 

Answer 6

對於只CSS的解決方案：

$('a.leaders').hover(function() { 
    $(this).addClass('hovered'); 
    $('a.leaders').not('.hovered').addClass('nothovered'); 
}, function() { 
    $('a.leaders').removeClass('nothovered hovered'); 
}); 

a.leaders.hovered { opacity:1; } 
a.leaders.nothovered { opacity:0.6; } 

只要確保你已經應用到您的元素的過渡，如：

-moz-transition: opacity .5s ease-in-out; 
-webkit-transition: opacity .5s ease-in-out; 
transition: opacity .5s ease-in-out; 

Answer 7

這對於CSS來說非常簡單。

看看這個http://jsfiddle.net/drjorgepolanco/ga5dy0tp/

HTML

<div id="main-nav"> 
    <ul> 
     <li>Link 1</li> 
     <li>Link 2</li> 
     <li>Link 3</li> 
     <li>Link 4</li> 
    </ul> 
</div> 

CSS

#main-nav ul { 
    list-style: none; 
} 

#main-nav ul:hover li { 
    opacity: 0.2; 
} 

#main-nav ul:hover li:hover { 
    opacity: 1; 
} 

添加過渡到列表中的元素，使它看起來更漂亮......

#main-nav ul li { 
    transition: opacity 0.4s ease-out; 
}