CODEWITHSUNDEEP
javascriptjqueryhtmlcss
joethemovie
joethemovie

Reputation: 57

Keep Browser from flashing when changing background image on hover

Looking for a way to smoothly transition between two background images when specific elements are hovered over? I've tried everything I can possibly think of.

The bg image styles are:

padding: 0
margin: 0
border: 0
background: #232930 url(../inc/alfaExt.jpg) 0 0 fixed
-webkit-background-size: cover
-moz-background-size: cover
-o-background-size: cover
background-size: cover
background-repeat: no-repeat
transition: background .3s

and here's the Js:

$('.siteButton').hover(function(){
    $('body').css({'background': '#232930 url(../inc/' + this.id +   'Ext.jpg)'});
});

The browser keeps flashing white when I switch between elements quickly. I've removed the transition and preloaded the images into the browser cache, no luck.

I'm aware of the sprite/position solution, but I need these images to fill the body completely with no repeat. Every test I've done with sprites hasn't worked out.

Upvotes: 0

Views: 28

Answers (1)

Abhinav
Abhinav

Reputation: 1200

you can add animation into image transaction, try 

$('.siteButton').hover(function(){
$('body').css({'background': '#232930 url(../inc/' + this.id +   'Ext.jpg)'}).fadeIn(200);

});

Upvotes: 1

Related Questions