jquery - 简单的 jquery css 氨基化淡入淡出

Question

我已经搜索了网络，但似乎找不到适合我的示例的解决方案。当一个 div 悬停在上面时，我希望所有其他 div 淡出。我有这个工作，但我如何让它动画，以便淡入淡出持续 0.5 秒？JSfiddle 下面非常感谢

$(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/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');
});

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/JE5fe/6/

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