jQuery desaparecendo / escurecimento outros elementos da lista quando se passa o cursor sobre, eu sou 90% lá ..?

Question

Eu tenho uma lista não ordenada, que tem talvez 30 itens. Quando um desses itens são pairava sobre, o resto dos itens da lista desaparecer para 30% e as estadias de itens oscila em 100%; quando você se afasta da lista, todos eles de fade de volta até 100% e eu consegui isso.

Meus problemas surge quando você se move de item para item, os outros itens da lista de desaparecer de volta até 100% e depois de volta para baixo para 30%. Eu quero que eles fiquem em 30% a menos que o usuário se move longe de toda a lista.

Eu uso o plugin hoverIntent em cada item da lista. Eu também usei jQuery para adicionar uma classe para o item da lista atual, para que eu pudesse, em seguida, desaparecer o resto e removê-lo uma vez que você se afastar. Eu tenho usado uma função de espera encontrado no site da jQuery Cookbook ( http://docs.jquery.com/Cookbook / wait )

Você me pegar?

Aqui está o meu código até agora:

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

* Obviamente, isso está dentro de um (documento) .ready $ (function ()

Alguém pode me ajudar por favor?

Muitos agradecimentos

Answer 1

Este parecia divertido, então eu implementou. Desde a aparência das coisas, seu seletor css pode ser simplificada. Eu acho que você só deseja o item da lista superior a desvanecer-se dentro e fora, mas não é claro a partir do exemplo. Este exemplo destaca o nó superior e faz o desbotamento corretamente. Eu acho que isso é o efeito que você estava indo para, mas eu não estou 100% certo. Eu não utilizar a funcionalidade de espera (), como eu não tenho certeza do que ele faz de você.

Essencialmente, parece que o problema que você está correndo em é que você está desaparecendo artigos em em foco quando você não deixou a lista ainda. Você só quer a desvanecer-se na lista ou outro itens de lista quando você inteiramente deixou a lista. Não use hoverIntent para essa parte, e lidar com o desaparecendo em toda a lista não ordenada e ele deve ser bom para ir.

O exemplo: http://jsbin.com/usobe

Tinker com o exemplo: 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

Que tal fazer algo como isto:
Testado-lo brevemente, mas eu acho que consegue o efeito que você está procurando.

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

Aqui está a solução mais simples:

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

Para uma solução apenas de 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; }

Apenas certifique-se que você tem uma transição aplicado ao seu elemento, como:

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

Answer 5

necessidade id para ver o seu html para entender melhor este problema, mas o que dizer algo como isto:

parece-me que o seu problema é que você está entrando e saindo em cada item na sua lista, o que você deve fazer é: 1) se o mouse para fora de toda a lista, disfarçá-la em 2) como movimentos do utilizador de um item para outro item, desaparecer o item mouse sobre a visíveis, outras a menos visível.

isso seria fácil com um plugin personalizado - novamente, necessidade id para ver o html. é uma responsabilidade muito grande, sem vê-lo viver, ou pelo menos o html.

Answer 6

Você está perto, e este deve ser um reparo fácil. em seu verificação de função para ver primeiro se o rato saiu da UL inteiramente. Se ele tem, então processar o fade in. Se não tiver, em seguida, mantê-los desbotada e simplesmente mudar o desbotamento da li que você saiu e li que você está digitando.

Answer 7

Isto é tão fácil de fazer com CSS.

Dê uma olhada neste 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;
 }

Add transição para os elementos da lista para torná-la mais bonita ...

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