jQuery затухает / затемняет другие элементы списка при наведении курсора мыши на один из них, я нахожусь там на 90% ..?
Вопрос
У меня есть неупорядоченный список, в котором может быть около 30 элементов.При наведении курсора мыши на один из этих элементов остальные элементы списка уменьшаются до 30%, а наведенный элемент остается на уровне 100%;когда вы удаляетесь от списка, все они снова уменьшаются до 100%, и мне это удалось.
Мои проблемы возникают, когда вы переходите от элемента к элементу, остальные элементы списка уменьшаются до 100%, а затем до 30%.Я хочу, чтобы они оставались на уровне 30%, если пользователь не уйдет из всего списка.
Я использую плагин hoverIntent для каждого элемента списка.Я также использовал jQuery для добавления класса к текущему элементу списка, чтобы затем я мог удалить остальные элементы и удалить их, как только вы уйдете.Я использовал функцию ожидания, найденную на сайте jQuery Cookbook (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).готово(function()
Кто-нибудь может мне помочь, пожалуйста?
Большое спасибо
Решение
Это звучало забавно, поэтому я реализовал это.Судя по всему, ваш 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>
Другие советы
Как насчет того, чтобы сделать что-то вроде этого:
Протестировал его кратко, но думаю, что он достигает того эффекта, который вы ищете.
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)
})
})
Вот более простое решение:
$("ul#sites > li").fadeTo("fast", 0.3);
$("ul#sites > li").hover(
function() { $(this).fadeTo("fast", 1.0); },
function() { $(this).fadeTo("fast", 0.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;
мне нужно просмотреть ваш html-код, чтобы лучше понять эту проблему, но как насчет чего-то подобного:
мне кажется, что ваша проблема в том, что вы постепенно переходите к КАЖДОМУ элементу в вашем списке, и то, что вы должны делать, это:1) если курсор мыши отсутствует во всем списке, уменьшите его видимость 2) когда пользователь переходит от одного элемента к другому, уменьшите видимость элемента, наведенного мышью, до видимого, а других - до менее видимых.
это было бы легко с помощью пользовательского плагина - опять же, мне нужно видеть html.это многое, что можно воспринять, не видя его вживую или, по крайней мере, в html.
Вы близко, и это должно быть легко исправить.в вашей функции вывода сначала проверьте, полностью ли мышь покинула UL.Если да, то обработайте постепенное появление.Если это не так, оставьте их тусклыми и просто измените затухание ли, которое вы оставили, и ли, в которое вы вошли.
Это так легко сделать с помощью 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;
}