jQuery Verblassen / Dimm andere Elemente Liste, wenn man schwebt über, ich 90% da bin ..?

Question

Ich habe eine ungeordnete Liste, die vielleicht 30 Produkte hat. Wenn eines dieser Elemente ist schwebt über, verblasst der Rest der Listenelemente zu 30% und die hovered- Artikel bleiben bei 100%; wenn Sie weg von der Liste zu verschieben, sie alle verblassen zurück bis zu 100%, und ich habe diese geführt werden.

Meine Probleme entsteht, wenn Sie von einem Punkt zum anderen zu bewegen, verblassen die anderen Listenelemente bis zu 100% zurück und dann wieder auf 30%. Ich mag, dass sie bei 30% bleiben, wenn der Benutzer aus der ganzen Liste weg bewegt.

Ich verwende das hoverIntent Plugin auf jedem Listeneintrag. Ich jQuery hinzufügen, um eine Klasse auf die aktuelle Listenelement, so konnte ich dann verblassen den Rest, und entfernen Sie es auch, wenn Sie weg bewegen verwendet. Ich habe eine Wartefunktion auf der jQuery Kochbuch-Website gefunden verwendet ( http://docs.jquery.com/Cookbook / wait )

Haben Sie mich bekommen?

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 wie Spaß, so dass ich es umgesetzt. Von den Blicken der Dinge, kann Ihr CSS-Selektor vereinfacht werden. Ich glaube, Sie nur das oberste Listenelement wollen in und aus verblassen, aber es ist nicht aus dem Beispiel deutlich. Dieses Beispiel verdeutlicht den obersten Knoten und tut richtig das Verblassen. Ich denke, das ist der Effekt, den Sie für den Gang waren, aber ich bin nicht 100% sicher. Ich habe nicht die wait () Funktion verwenden, wie ich bin nicht sicher, was es Ihnen tut.

Im Wesentlichen ist es klingt wie das Problem in die ausgeführt werden, ist, dass Sie Elemente in Hover heraus verblassen, wenn Sie nicht die Liste noch verlassen haben. Sie wollen nur in der Liste oder andere Listenelemente verblassen, wenn Sie die Liste vollständig verlassen haben. Verwenden Sie keine hoverIntent für den Teil, und den Griff auf der gesamten ungeordnete Liste den Schwund und es sollte gut zu 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

Wie wäre es so etwas wie dies zu tun:
Getestet es kurz, 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 3

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 4

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 einen Übergang zu Ihrem Element angelegt haben, wie:

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

Answer 5

id benötigen html, um zu sehen dieses Problem besser zu verstehen, aber was ist mit etwas wie folgt aus:

es scheint mir, dass Ihr Problem ist, dass Sie in und aus für jedes Element in der Liste schwinden, was Sie tun sollten ist: 1), wenn die Maus aus der ganzen Liste, verblassen sie in 2) als Benutzer bewegt sich von einem Punkt zu einem anderen Punkt, verblassen die Maus-over Element zu sichtbar, andere weniger sichtbar.

Dies würde mit einem benutzerdefinierten Plugin einfach sein - auch hier id die HTML sehen müssen. seine viel zu nehmen in ohne sie leben zu sehen, oder zumindest die html.

Answer 6

Sie sind in der Nähe, und dies sollte eine einfache Lösung sein. auf Ihrer Check-out-Funktion zuerst, ob die Maus, um die UL ganz verlassen hat. Wenn ja, dann verblassen in verarbeiten. Wenn nicht, dann hat sie verblasst halten und einfach das Verblassen des li ändern Sie die li links und Sie eingeben.

Answer 7

Das 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;
 }

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

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