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 example