0

For duplicating alerts, please read the whole question. I AM NOT SEARCHING FADING TRANSITION IMAGE BACKGROUND ON A DIV. What i want is a fading transition of the whole body background image when clicking one of the buttons as show in the snippet. Making a wrapping div could be a solution, but is not the answer i'm looking for.

I found many answers for fading background-images on div but not on the whole body.

Cross fading images

There are some negative answers from 2010, i guess there will be something new around. And similar questions with no answer at all:

Fade In body Background image

I´ve got a good solution for fading the body background-color using jquery-ui.js:

Fading background color

But doesn´t work with background-images. Here is the example:

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1',1000, "easeOutBounce" );
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2',1000, "easeOutBounce" );
});

$("#btn3").click(function() {
 $('body').removeClass(); 
 $('body').addClass('class3',1000, "easeOutBounce" );
});
body {align-items: center;
justify-content: center;
text-align: center;
}
body.class1 {
background-image: url(https://1.bp.blogspot.com/-10uYQ232GmA/VB2cCRa0pDI/AAAAAAAAGgw/m9nRdE1d-Rg/s1600/checkerboard-tile-pattern.jpg);
background-repeat:repeat;
}
body.class2 {
background-image: url(http://www.subdude-site.com/WebPages_Local/RefInfo/Computer/WebDev/WebPageTiles/tilesTiles/tile_pattern_marbleTiles_bright_green_256x256.jpg);
background-repeat:repeat;

}
body.class3 {
background-image: url(https://4.bp.blogspot.com/-mCCWT2Qsqe4/UhHnOaJW7KI/AAAAAAAAFRo/4FHJyJdAeko/s1600/glossy-blue-ceramic-tiles-pattern.jpg);
background-repeat:repeat;

}
button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="class1">
<button id="btn1">01</button>
<button id="btn2">02</button>
<button id="btn3">03</button>
</body>
Aspid
  • 113
  • 8
  • fading transitions between each background – Aspid Nov 04 '17 at 22:55
  • just add those lines in css to each body.class{ ` -webkit-transition: background 1000ms ease-in-out 200ms; -moz-transition: background 1000ms ease-in-out 200ms; -o-transition: background 1000ms ease-in-out 200ms; transition: background 1000ms ease-in-out 200ms;` – Roman Habibi Nov 04 '17 at 23:11
  • Doesn't fade, just stop the appearance of the next background a while. – Aspid Nov 04 '17 at 23:21
  • Which browser are you using? For me it works fine in Chrome, – Roman Habibi Nov 04 '17 at 23:37
  • No in Codepen Firefox or Chrome: https://codepen.io/danielillo/pen/pdyQyd – Aspid Nov 04 '17 at 23:42
  • oh, i see, for me the same issue, however in jsfiddle in chrome it looks ok; https://jsfiddle.net/qbqyjh95/1/ p.s. but in firefox there is definitely an issue – Roman Habibi Nov 04 '17 at 23:55
  • That's exactly what I'm looking for @Roman Habibi, I just saw the jsfiddle on Chrome Android and works perfect. A pity it doesn't in all browsers. – Aspid Nov 05 '17 at 00:22

0 Answers0