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

我正在为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转换的情况下才会启动，这就是为什么它在Chrome、Firefox、Opera和Safari中工作得很好的原因

还有，有没有一个好方法可以把它缩小到一个部分，而不是三个部分？我对此表示怀疑，但嘿，我已经在问问题了，所以不妨试试。

无需对所有内容进行显式编码。此代码应处理您的所有情况：

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

---

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

我喜欢这个想法，但不幸的是，这不起作用。图像不是同级图像，这也会淡出

。更多
。再加上每次悬停都会淡出不同的图像，所以效果不太好。编辑：哇，现在可以了。我不知道怎么做，但它确实有效。但仍然不能回答最初的问题。我来看看是怎么回事。可能是事件在错误的时间开火。通常在动画代码修复此问题之前使用
.stop（）。你能删除Modernizer代码来寻找CSS3吗？我在Linux上运行Chrome，所以我无法判断我的代码是否修复了动画，或者没有交换图像的顺序，使它们像这样：
web、图形、脚本
。图像的顺序是倒序的。