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

Question

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

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

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

* Очевидно, что это находится в пределах $ (документ) .ready (функция()

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

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

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) если вывести мышь из списка WHOLE, увяжите его в 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; 
}