Question

我正在寻找一种简单的方法，可能是使用jQuery，在悬停时将所有其他DIV的不透明度降低，然后将它们重新打开。

<div id="fade_container">
     <div id="fade1">Content</div>
     <div id="fade2">Content</div>
     <div id="fade3">Content</div>
     <div id="fade4">Content</div>
</div>

例如：当 fade2 悬停 fade1 ， fade3 和 fade4 时应该失去一些不透明度。

任何帮助将不胜感激，

谢谢！

Answer 1

http://api.jquery.com/fadeTo/

$('#fade_container div').hover(function(){  // mouseover 
  $(this).siblings().fadeTo('fast',0.5);  
}, function(){  // mouseout 
  $(this).siblings().fadeTo('fast',1.0);
});

http://jsfiddle.net/6XygU/4/

Answer 2

CSS：

.faded {
    opacity:0.5;
}

JQuery的：

$('#fade_container div').hover(function(){
    $(this).siblings().addClass('faded');
},function(){
    $(this).siblings().removeClass('faded');
});

Answer 3

你试过看jquery effects图书馆吗？这个库完全符合您的要求。

Answer 4

这样的事情怎么样？

$('div', '#fade_container').hover(function(){
   $('div', '#fade_container').not(this).stop().animate({
     opacity: .2
   }, 500);

   $(this).stop().animate({
     opacity: 1
   }, 500);
});

演示：http://jsfiddle.net/Sj8x5/1/

切换其他DIV上的不透明度

4 个答案: