CODEWITHSUNDEEP
jquerycssmouseovermouseenter
Dennis
Dennis

Reputation: 147

Background Image is flickering on mouseover

I was trying to change my background image on a mouseover, the images are changing but the transition is flickering and the fadeIN/Out seems not working …

Code:

css:

.background {
    position: fixed;
    top:100px;
    width: 100%;
    height: 100%;
    background: url(../img/angst.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

js:

$( ".project_link_01" )
  .mouseover(function() {
    $('.background').css('backgroundImage','url(../img/test.png)').fadeIn();
  })
  .mouseout(function() {
    $('.background').css('backgroundImage','url(../img/angst.png)');
});

Upvotes: 0

Views: 420

Answers (2)

guest271314
guest271314

Reputation: 1

Try utilizing css :hover

.background {
  position: fixed;
  top: 100px;
  width: 100%;
  height: 100%;
  background: url(http://lorempixel.com/50/50/nature) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: background 500ms;
}
.background:hover {
  background: url(http://lorempixel.com/50/50/technics) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<img src="http://lorempixel.com/50/50/technics" style="display:none;" />
<div class="background"></div>

Upvotes: 1

loveNoHate
loveNoHate

Reputation: 1547

You need to preload the images like in:

<img src="test.png" style="display:none">

For each of it.

Or use a sprite:

Upvotes: 0

Related Questions