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

简单的jquery css胺化褪色

3 个答案: