javascript - 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 の例

Answer 2

$フィドルに欠落がありました。それを追加すると、意図したとおりに動作するようになりました。