jquery显示/隐藏和不透明

我将有3个100x100像素div，向左漂移。

<div id="container"> 
    <div id="1">did you know?</div> 
    <div id="2">help</div> 
    <div id="3">other</div> 
</div>

当您将鼠标悬停在这三个div上时，另一个div将通过show（）显示;或者slideDown（）;以及该主题的特定内容。

问题是，有没有办法让它悬停在任何div 1,2,3上，其他两个会降低不透明度，使它们看起来透明？

那部分我无法弄清楚...

在此先感谢。

来源

2010-06-29 tony noriega

首先这里，确保这些ID是有效的，例如不以数字开头（除非您使用的是HTML5文档类型）。

然后你可以使用.animate()和.hover()，像这样：

$("#container > div").css({opacity: 0.2 }).hover(function() { 
    $(this).stop().animate({ opacity: 1 }); 
}, function() { 
    $(this).stop().animate({ opacity: 0.2 }); 
});

You can try a demo here，初始.css()呼叫，使他们在页面加载的所有非徘徊十岁上下。

更完整的演示，展示内容还有，try this :)

下面是一个示例标记：

<div id="container"> 
    <div>did you know?</div> 
    <div>help</div> 
    <div>other</div> 
</div> 

<div id="content"> 
    <div>Did You Know? Content</div> 
    <div>Help Content</div> 
    <div>Some other stuff</div> 
</div>

和脚本：

$("#container > div").css({opacity: 0.2 }).hover(function() { 
    $(this).stop().animate({ opacity: 1 }); 
    $("#content div").eq($(this).index()).stop(true, true).slideDown(); 
}, function() { 
    $(this).stop().animate({ opacity: 0.2 }); 
    $("#content div").eq($(this).index()).stop(true, true).slideUp(); 
});

你可以当然要调整它，让最后一个悬空，等等......这只是一个想法，就像y一样ou descibe。

来源

2010-06-29 22:12:51

我想你需要在'slideDown（）'之前''.stop（true，true）'并且在'slideUp（）'之前避免动画队列堆积 – 2010-06-29 22:27:50

@Russ--好的调用，我没有看对于排队这些，总是一个很好的补充......这一切都取决于他的后续，这听起来像他已经有某种影响，我不确定这个问题，如果这甚至是有用的，希望它会对某人:) – 2010-06-29 22:36:38

怎么样这样的：

div.onmouseover = function() { 
    for(i = 0, c = this.parentNode.childNodes, e = c.length; i < e; i++) { 
     if (c[i] !== this) { 
      $(c[i]).css('opacity', '...'); 
     } 
    } 
}

来源

2010-06-29 22:10:46 Tom

jquery显示/隐藏和不透明

回答

相关问题