Странные проблемы fadeIn () и fadeOut () jQuery

Question

Я создаю обратно-совместимую версию чего-то, разработанного в CSS3.В основном это работает, но с некоторыми проблемами, которые, я надеюсь, вы, ребята, сможете понять.

Сначала посмотрите на эту страницу, чтобы понять, о чем я говорю:

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

Отлично работает в Chrome, Firefox, Opera и Safari.Я работаю над настройками IE, используя jQuery.

Итак, как вы можете видеть, когда вы наводите курсор на один столбец, другие два столбца переходят в черно-белый цвет.Это делается с использованием четырех разных изображений и затемнения изображений, чтобы выявить правильное изображение.У меня проблема в том, как исчезают изображения.В 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);
});

Этот код кажется избыточным, поэтому, если кто-то может предложить способ его сжать, я с удовольствием исправлю свой ответ.