Question

我正在创建一个在CSS3中设计的向后兼容版本。它主要起作用，但有一些问题，我希望你们能搞清楚。

首先看一下这个页面，了解我在说什么：

它完全适用于Chrome，Firefox，Opera和Safari。我正在使用jQuery进行IE调整。

因此，正如您所看到的，当您将鼠标悬停在一列上时，其他两列将淡入淡出为黑色和白色。这是使用四个不同的图像完成的，并将图像淡出以显示正确的图像。我遇到的问题是图像是如何淡出的。在IE中，当您将鼠标悬停在每列上时，图像会淡出，但首先全彩色图像会闪烁。此外，如果您快速将光标拖到整个设置上，它会闪烁4次。我知道如何使用.stop(true,false)，并尝试过，.stop(true,true)，.stop(false,false)和.stop(false,true)，每个都有自己的问题，主要只有一个图片褪色，而其他人突然跳起来。

我的剧本：

$("#left").hover(
    function () {
        // fading
        $("#slider #main").fadeOut(500);
        $("#slider #web").fadeOut(500);
        $("#slider #graphics").fadeOut(500);
        // description animation
        $("#left .more").stop(true,false).delay(150).animate({height:"120px"}, 500);
    },
    function () {
        // fading
        $("#slider #main").fadeIn(500);
        $("#slider #web").fadeIn(500);
        $("#slider #graphics").fadeIn(500);
        // description animation
        $("#left .more").stop(true,false).delay(150).animate({height:"0px"}, 500);
    }
);

$("#center").hover(
    function () {
        // fading
        $("#slider #main").fadeOut(500);
        $("#slider #scripting").fadeOut(500);
        $("#slider #web").fadeOut(500);
        // description animation
        $("#center .more").stop(true,false).delay(150).animate({height:"120px"}, 500);
    },
    function () {
        // fading
        $("#slider #main").fadeIn(500);
        $("#slider #scripting").fadeIn(500);
        $("#slider #web").fadeIn(500);
        // description animation
        $("#center .more").stop(true,false).delay(150).animate({height:"0px"}, 500);
    }
);

$("#right").hover(
    function () {
        // fading
        $("#slider #main").fadeOut(500);
        $("#slider #scripting").fadeOut(500);
        $("#slider #graphics").fadeOut(500);
        // description animation
        $("#right .more").stop(true,false).delay(150).animate({height:"120px"}, 500);
    },
    function () {
        // fading
        $("#slider #main").fadeIn(500);
        $("#slider #scripting").fadeIn(500);
        $("#slider #graphics").fadeIn(500);
        // description animation
        $("#right .more").stop(true,false).delay(150).animate({height:"0px"}, 500);
    }
);

此版本仅在不支持CSS Transitions时触发，这就是为什么它在Chrome，Firefox，Opera和Safari中运行良好的原因。

另外，有没有一种方法可以将其缩小到一个部分，而不是三部分？我对此表示怀疑，但是嘿，我已经在提问了，所以不妨试试。

Answer 1

无需明确编码所有内容。此代码应该处理所有情况：

$('#home_nav > *').hoverIntent(function() {
  $('#slider img').eq($(this).index()).siblings().stop(true, false).fadeOut(500);
  $(this).find('.more').stop(true, false).animate({height: '120px'}, 500);
}, function() {
  $('#slider img').eq($(this).index()).siblings().stop(true, false).fadeIn(500);
  $(this).find('.more').stop(true, false).animate({height: '0px'}, 500);
});

这段代码似乎是多余的，所以如果有人可以提出一种方法来压缩它，我很乐意解决这个问题。

奇怪的fadeIn（）和fadeOut（）问题jQuery

1 个答案: