jQuery затухание / затемнение других элементов списка при наведении на них, я там на 90% ..?

Question

У меня есть неупорядоченный список, в котором может быть 30 пунктов. Когда один из этих элементов наведен, остальные элементы списка исчезают до 30%, а наведенный объект остается на уровне 100%; когда вы уходите из списка, все они исчезают до 100%, и я справился с этим.

Мои проблемы возникают при переходе от элемента к элементу, остальные элементы списка исчезают до 100%, а затем снижаются до 30%. Я хочу, чтобы они оставались на уровне 30%, если пользователь не уходит из всего списка.

Я использую плагин hoverIntent для каждого элемента списка. Я также использовал jQuery, чтобы добавить класс к текущему элементу списка, чтобы затем я мог затемнить остальные и удалить его, как только вы удалились. Я использовал функцию ожидания, найденную на сайте поваренной книги jQuery (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
});

* Очевидно, что это в $ (document) .ready (function ()

Может кто-нибудь помочь мне, пожалуйста?

Большое спасибо

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

Как насчет того, чтобы сделать что-то вроде этого:
Протестировал это кратко, но я думаю, что он достигает эффекта, который вы ищете.

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

Для решения только для 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 4

Вот более простое решение:

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

Answer 5

Это так легко сделать с помощью 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>

1009 * 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;
}

Answer 6

Вы близки, и это должно быть легко исправить. в вашей функции out сначала проверьте, полностью ли покинула мышь UL. Если это так, обработайте ваше затухание. Если это не так, сохраните их блеклыми и просто измените затухание оставленного вами li и li, в который вы входите.

Answer 7

идентификатор должен видеть ваш HTML, чтобы лучше понять эту проблему, но что-то вроде этого:

мне кажется, что ваша проблема в том, что вы добавляете и выводите КАЖДЫЙ элемент в вашем списке, что вы должны делать: 1) если мышь из целого списка, исчезнуть в 2) когда пользователь перемещается от одного элемента к другому, постепенно наведите курсор мыши на видимый, другие на менее видимый.

это было бы легко с пользовательским плагином - опять же, id нужно увидеть HTML. это много, чтобы принять, не видя его вживую, или, по крайней мере, HTML.