Geek asks and answers

JQuery - animate from transparent to color without a white flash?

I need to animate from transparent to color, but when I do, I get a white flash. I assume this is due to the fact that there is no base color for the animation. How do I get around this?

$('#nav a').hover(function() {
    $(this).animate({
        'background-color' : $(this).attr('data-background'),
        'color' : $(this).attr('data-rollover')
    }, 900);
});

<a style="color:#ffff00; " data-background="#000066" data-color="#ffff00" data-rollover="#000000" href="index.php?p=1" ><span >Home</span></a>
+3
source share
2 answers

Animate opacityinstead of a property background-color.

+5
source

Alex is right. you do it with help opacity. You can try the following:

$('#nav a').hover(function() {
    $(this).animate({
        'opacity': 0
    },
    1,
    function() {
        $(this).css({
            'background-color': $(this).attr('data-rollover'),
            'color': $(this).attr('data-color')
        }).animate({
            'opacity': 1
        },
        900);
    });
});
+1
source

More articles:


All Articles