Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Strange fadeIn() and fadeOut() Problems jQuery

Strange fadeIn() and fadeOut() Problems jQuery

Problem

I'm creating a backwards-compatible version of something designed in CSS3. It mostly works, but with a few problems, that I hope you guys can figure out.

Look at this page first to understand what I'm talking about:

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

It works prefectly in Chrome, Firefox, Opera and Safari. I'm working on the IE tweaks, using jQuery.

So, as you can see, when you hover over one column, the other two columns fade to black and white. This is done using four different images, and fading the images out to reveal the correct one. The issue I'm having is how the images fade out. In IE, when you hover over each column, the images do fade out, but first the full color image flashes. Also, if you quickly drag your cursor over the entire set, it flashes like 4 times. I know how to use .stop(true,false), and have tried that, as well as .stop(true,true), .stop(false,false), and .stop(false,true), each of which presents its own problems, mainly only one image fading, while the others just suddenly jump.

My script:

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

This version only fires if CSS Transitions are not supported, so that's why it works great in Chrome, Firefox, Opera and Safari.

Also, is there a good way to shrink this down to one section, instead of three? I doubt it, but hey, I'm already asking questions, so might as well try.

Problem courtesy of: JacobTheDev

Solution

No need to code everything explicitly. This code should handle all your cases:

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

This code seems redundant, so if anyone can suggest a way to condense it, I'd gladly fix my answer.

Solution courtesy of: Blender

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Strange fadeIn() and fadeOut() Problems jQuery

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×