Блог

Я создаю обратно совместимую версию чего-то, разработанного в 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.

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

Нет необходимости кодировать все явно. Этот код должен обрабатывать все ваши случаи:

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

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