在mouseleave上将所有内容返回到先前的状态

Question

我把这个jsfiddle放在一起。

http://jsfiddle.net/YJPV9/

<div id="wrapper">
    <div class="portfolio"></div>
    <div class="portfolio"></div>
    <div class="portfolio"></div>
    <div class="portfolio"></div>
</div>

.portfolio {
    height:50px;
    width:200px;
    float:left;
    margin:20px 20px 0 0;
    background-color:red;

}
#wrapper {
    width:500px;
}
.portfolio:hover {
}

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

    $(this).stop().animate({
        opacity: 1
    }, 500);
});
$('.portfolio', '#wrapper').mouseleave(function() {
    ('.portfolio', '#wrapper').animate({opacity:1}, 500);
});

我希望将所有元素恢复为不透明度：1当鼠标离开包装器时。

Answer 1

试试这个：

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

<强> jsFiddle example

Answer 2

你的小提琴中缺少$。添加它可以使其按预期工作。