1

我有多个框，我想对每个框应用悬停效果，当我悬停一个框时，所有其他框应该看起来更透明，从而产生更集中的效果。我需要通过某种缓慢的过渡效果来完成它。

我试图使它如下，但似乎效果不佳

http://jsfiddle.net/ahmed2222/rSNS5/2/

<div class="container">
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>  
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
 <div>

.container {
    width: 400px;
    overflow: auto;
}

.thumb {
    width:100px;
    height:100px;
    background: #000;  
    display: inline-table;
    margin: 10px;
}

$(function() {
    $('.thumb').hover(function () {
      $(this).css({"opacity":"1"});
      $('.thumb').not(this).animate({"opacity":"0.3"}, 1000);
    },
    function () {
      $('.thumb').css({"opacity":"1"});
    });
});

任何想法，为什么我的代码不起作用？

4

2 回答 2

1

不需要 javascript 来实现这一点，纯 css 会做：

.container:hover .thumb {
    opacity: .5;
}

.container:hover .thumb:hover {
    opacity: 1;
}

和一个演示用的小提琴：http: //jsfiddle.net/pPWgq/

编辑：
和过渡：http: //jsfiddle.net/pPWgq/1/

刚刚添加了这个：

.thumb {
   ...
   transition: opacity 1s;
}
于 2013-06-30T13:03:49.270 回答
1

我注意到您的原始解决方案的唯一真正问题是，当您快速从一个项目移动到另一个项目时，有时正在运行的动画会导致问题。这是你想要解决的问题吗？如果是这样，你可以放stop()s 来停止动画。

试试这个：http: //jsfiddle.net/rSNS5/4/

$(function() {
    $('.thumb').hover(function () {
      $('.thumb').stop();
      $(this).css({"opacity":"1"});
      $('.thumb').not(this).animate({"opacity":"0.3"}, 1000);
    },
    function () {
      $('.thumb').stop().css({"opacity":"1"});
    });
});
于 2013-06-30T13:12:11.223 回答