jquery显示/隐藏和不透明度

Question

这是我的lehmans关于我想要完成的事情的术语.

我将有3个100x100 px div,向左浮动.

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

当您将鼠标悬停或鼠标悬停在这3个div中的任何一个上时,将通过show()显示另一个div; 或者sl​​ideDown(); 使用特定于该主题的内容.

问题是,有没有办法使它当你将鼠标悬停在任何div 1,2,3上时,另外两个会降低不透明度以使它们看起来透明？

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

提前致谢.

Answer 1

首先,请确保这些ID有效,例如不以数字开头(除非您使用的是HTML5 doctype).

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

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

你可以在这里尝试一个演示,最初的.css()调用是在页面加载时使它们全部不受影响.

要获得更完整的演示,还要显示内容,试试这个 :)

这是示例标记:

<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();
});

你当然可以调整它,让最后一个悬空的开放等等......这只是你想象的效果的一个想法.