简单的jquery css分层淡入淡出

Question

我搜索过网络，但似乎找不到适合我的示例的解决方案。当一个div悬停在上面时，我希望所有其他div都淡出。我有这个工作，但我如何使它动画化，使渐变持续0.5秒？下面的J小提琴非常感谢

$(function() {
    $(".box").hover(function() {
        $(this).css('opacity', '1').siblings(".box").css('opacity', '0.5')
    });
    $(".OuterBox").mouseout(function() {
        $(this).find(".box").css('opacity', '1')
    });
});

http://jsfiddle.net/JE5fe/

Answer 1

试试这个：

http://jsfiddle.net/JE5fe/6/

$(this).css('opacity', '1').siblings(".box").css('opacity', '0');

Answer 2

试试这个：

$(".box").mouseenter(function () {
    $(this).animate({
        opacity: 1
    }, 500).siblings(".box").stop().animate({
        opacity: 0.5
    }, 500);    
}).mouseout(function () {
    $(".box").stop().animate({
        opacity: 1
    }, 500);
});

http://jsfiddle.net/JE5fe/15/

不要忘记检查它是否正确；）

Answer 3

使动画更自然。

http://jsfiddle.net/fcPhL/

$(function() {
    $('.OuterBox').on({
        mouseenter: function () {
            $(this).stop().css('opacity', 1).siblings().stop().fadeTo(500, 0.5);
        },
        mouseleave: function (e) {
            if (!$(e.relatedTarget).hasClass('box')) {
                $(this).siblings().fadeTo(500, 1);
            }
        }
    }, '.box');
});