jQuery Fading/Dimmen andere Listenelemente, wenn man über ist, bin ich 90% da ..?

Question

Ich habe eine ungeordnete Liste, die vielleicht 30 Elemente hat. Wenn einer dieser Gegenstände über dem Objekt schwebt, verblasst der Rest der Listenelemente auf 30% und das Objekt mit dem Schweben bleibt bei 100%; Wenn Sie sich von der Liste entfernen, werden alle auf 100% zurückgesetzt und das ist mir gelungen.

Meine Probleme treten auf, wenn Sie von Artikel zu Artikel wechseln, die anderen Listenelemente werden wieder auf 100% und dann wieder auf 30% zurückgesetzt. Ich möchte, dass sie bei 30% bleiben, es sei denn, der Benutzer bewegt sich von der ganzen Liste weg.

Ich verwende das HoverIntent-Plugin auf jedem Listenelement. Ich habe auch jQuery verwendet, um dem aktuellen Listenelement eine Klasse hinzuzufügen, damit ich den Rest ausblenden und entfernen kann, sobald Sie weg sind. Ich habe eine Wartefunktion verwendet, die auf der jQuery-Kochbuchseite gefunden wurde (http://docs.jquery.com/Cookbook/wait)

Erhalten Sie mich?

Hier ist mein Code so weit:

$.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 
}); 

* Offensichtlich ist dies in einem $ (document) .ready (function()

Kann mir jemand bitte helfen

Vielen Dank

Answer 1

Das klang nach Spaß, also habe ich es implementiert. Aus der Sicht der Dinge kann Ihr CSS-Selektor vereinfacht werden. Ich denke, dass Sie nur das oberste Listenelement ein- und ausblenden möchten, aber das ist aus dem Beispiel nicht ersichtlich. In diesem Beispiel wird der oberste Knoten hervorgehoben und die Überblendung korrekt ausgeführt. Ich denke, das ist der Effekt, den Sie anstrebten, aber ich bin mir nicht 100% ig sicher. Ich habe die wait() -Funktionalität nicht verwendet, da ich nicht sicher bin, was Sie tun.

Im Wesentlichen klingt es wie das Problem, dass Sie darin sind, dass Sie Elemente im Schwebeflug verblassen, wenn Sie die Liste noch nicht verlassen haben. Sie möchten nur die Liste oder andere Listenelemente einblenden, wenn Sie die Liste vollständig verlassen haben. Verwenden Sie nicht HoverIntent für diesen Teil, und behandeln Sie das Verblassen auf der gesamten ungeordneten Liste, und es sollte gut gehen.

Das Beispiel: http://jsbin.com/usobe

Tinker mit dem Beispiel: 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 müssen Sie Ihre HTML zu sehen, um dieses Problem besser zu verstehen, aber was ist mit so etwas:

Es scheint mir, dass Ihr Problem darin besteht, dass Sie auf JEDEM Element in Ihrer Liste ein- und ausblenden, was Sie tun sollten: 1) Wenn Sie aus der WHOLE-Liste heraus klicken, blenden Sie es in 2) als Benutzer bewegt sich von einem Objekt zu einem anderen Element, blendet das Mouse-Over-Element sichtbar, andere weniger sichtbar aus.

dies wäre einfach mit einem benutzerdefinierten Plugin - wieder, ID muss das HTML zu sehen. es ist viel zu sehen, ohne es live zu sehen, oder zumindest das HTML.

Answer 3

Sie sind in der Nähe, und dies sollte eine einfache Lösung sein. Überprüfen Sie auf Ihrer Out-Funktion zuerst, ob die Maus den UL vollständig verlassen hat. Wenn dies der Fall ist, verarbeiten Sie Ihre Einblendung. Wenn nicht, dann lassen Sie sie verblasst und ändern Sie einfach das Verblassen der Li, die Sie verlassen haben, und das Li, in das Sie eintreten.

Answer 4

Wie wäre es so etwas wie dies zu tun:
es kurz getestet, aber ich denke, es ist die Wirkung erzielt, die Sie suchen.

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

Hier einfachere Lösung:

$("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

Für eine CSS-only Lösung:

$('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; } 

So stellen Sie sicher, dass Sie ein Übergang zu Ihrem Element angewendet haben, wie:

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

Answer 7

Dies ist so einfach mit CSS zu tun.

Werfen Sie einen Blick auf diese 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; 
} 

Übergang zu den Listenelemente hinzufügen, um es schönere aussehen ...

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