javascript - 奇怪的 fadeIn() 和 fadeOut() 问题 jQuery

Question

我正在为用 CSS3 设计的东西创建一个向后兼容的版本。大部分情况下是可行的，但有一些问题，我希望你们能解决。

先看看这个页面来理解我在说什么:

http://bearce.me/new-home/index.htm

它在 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 转换时触发，因此它在 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);
});

这段代码似乎是多余的，所以如果有人能提出一种压缩它的方法，我很乐意修正我的答案。