jQuery淡入淡出/淡化其他列表元素,当我有一个悬停时,我在那里90%..?
我有一个无序列表,其中可能有30个项目。当这些物品中的一个悬停时,剩余的物品将褪色至30%,而悬挂物品则保持100%。当你从列表中移开时,它们都会褪去100%,我已经管理好了。jQuery淡入淡出/淡化其他列表元素,当我有一个悬停时,我在那里90%..?
当您从一个项目移动到另一个项目时,其他列表项会逐渐回退到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
});
*显然,这是一个$(文件)。就绪内(函数()
谁能帮我请
非常感谢
这听起来很有趣,所以我实现了它。从外观上看,你的CSS选择器可以简化。我认为你只想让最上面的列表项淡入淡出,但是从这个例子中不清楚。本示例突出显示了最上面的节点并正确进行了衰减。我认为这是你要去的效果,但我不是100%肯定的。我没有使用wait()功能,因为我不确定它对你的功能。
从本质上讲,它听起来像是你遇到的问题是,当你还没有离开列表时,你正在淡入物品。当您完全离开列表时,您只想淡入列表或其他列表项目。不要对该部分使用hoverIntent,并处理整个无序列表上的淡入淡出,应该很好。
鼓捣出的例子: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>
ID需要看你的HTML,以便更好地理解这个问题,但对于这样的事情:
在我看来,你的问题在于你在列表中的每个项目上淡入淡出,你应该做的是: 1)如果从整个列表中滑出,将其淡入 2)作为用户从一个项目移动到另一个项目,将鼠标悬停的项目淡化为可见,其他项目不可见。
这将很容易与自定义插件 - 再次,ID需要看到的HTML。如果没有看到它的存在,或者至少是html,那么它就会变得很重要。
你很近,这应该是一个简单的修复。在您的外出功能检查首先看鼠标是否完全离开UL。如果有,然后处理你的淡入。如果没有,那么让它们消失,并简单地改变你离开的李和你正在进入的李的褪色。
如何做这样的事情:
测试它虽然简短,但是我认为它达到你正在寻找的效果。
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;
这对于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;
}
你能赞成吗?用此代码提供测试页面? – mkoryak 2009-04-17 13:06:07
在http://jsbin.com上设置了一个示例页面,将其保存为公共URL,然后在您的问题中链接到它 – 2009-04-17 13:14:46
我将立即在jsbin上设置它,谢谢。 – Zander 2009-04-17 13:21:23