Jquery Background Fader

Question

I have a script that works, however the background images are "popping" in and not fading in and out smoothly. They change instantly. I am only testing 2 backgrounds right now, not 4.

This is my new Fiddle.

It is only toggling between the 1st background image and the 4th.

EDIT: New JQuery is below:

$(document).ready(function(){
    setInterval(function() {
      $("body").toggleClass('background2', 1000);
      $("body").toggleClass('background3', 1000);
      $("body").toggleClass('background4', 1000);
    }, 3000);
});

I honestly cant write jquery. Learning. So use: $body.fadeIn('background2', 1000); for example? <<< Well, that didnt work. Might you illustrate your point? — FlannelBeard, Jun 15 '14 at 02:13
http://stackoverflow.com/questions/7319552/can-i-fade-in-a-background-image-css-background-image-with-jquery — Fabricator, Jun 15 '14 at 02:16
Popnoodles, that is why I am asking for help. :) Fabricator, checking that stack now. Will post answer if it helps. — FlannelBeard, Jun 15 '14 at 02:18
Do you want fadeIn images in sequence? then this links is usefull http://stackoverflow.com/questions/12018819/how-to-fade-in-images-in-sequence — A l w a y s S u n n y, Jun 15 '14 at 02:42
Yes, @sany2k8. However how do I attach this sequence to the body, through an array? — FlannelBeard, Jun 15 '14 at 02:46
Try this way, foreach($imagearray as $img) { echo ""; } this may help you http://stackoverflow.com/questions/10460911/retrieving-an-array-of-images-on-html-page-using-php — A l w a y s S u n n y, Jun 15 '14 at 13:23

AstroCB · Accepted Answer · 2014-06-15T02:43:17.937

0

You'll have to use jQuery UI's toggleClass() function.

$(element).toggleClass('otherClass', duration);

In your case, you'd set the initial class of the body to background1 and toggle between the other classes. I've set that up for you here, but the reason why you're not seeing anything is because all of your classes point to the same image.

You can see it in action here, where I've commented out your images and used simple colors.

edited Jun 15 '14 at 02:43

answered Jun 15 '14 at 02:37

AstroCB

12,337
20
57
73

Ah, I see how this works. Thank you for the assistance. When I take out the colors and try it with the images it still pops in instantly with no transition. background1 and background2 are different, though background2's only difference is a slight green tint. I wanted this to be a subtle background affect. Any way I can use RGBa and just overlay a 0.2 opacity color over 1 original background image 4 times? – FlannelBeard Jun 15 '14 at 02:44
@FlannelBeard I updated the first link to toggle through all four classes and, unless my eyes are deceiving me (which is entirely possible), I see no change between them at all. They shouldn't be jumping in: the only reason I can think that it would do it initially is because it has to load the image from the external source before it sets it as the background, in which case I would recommend downloading the image and using it locally. – AstroCB Jun 15 '14 at 02:46
Cant be, its a small png repeated. Here is my [dev theme](http://www.elevancement.com/novus-theme/). I made the saturation on those background images high so you can see the difference. Still pops in. Im learning a lot of jquery tonight through this so thank you. I wonder why its not fading... it does it with colors. Hmm. The other issue is that it only toggles between the 4th class now. Maybe we need an array? – FlannelBeard Jun 15 '14 at 02:54
@FlannelBeard It may not be able to fade through images because it is not immediately obvious how those images are connected. It appears to you that the images are the same with slight variation, but jQuery does not know anything outside of the fact that they are different images. – AstroCB Jun 15 '14 at 03:03
Also, to combat what all the others are saying, you can't really use `fadeIn()` and `fadeOut()`, because you're changing a background image. Unless you want to overlay a `div` on the entire page, those won't help you much. – AstroCB Jun 15 '14 at 03:08
Understood, this is a huge learning experience / curve for me. I am still trying some things out... I might be approaching this all wrong. – FlannelBeard Jun 15 '14 at 03:14
CSS animations might be what you're looking for, but I haven't really looked into that topic much, so I'm not the one to ask about those. – AstroCB Jun 15 '14 at 03:16

score -1 · Answer 2 · answered Jun 15 '14 at 02:25

-1

Use jquery fadein and fadeout. Take a look at this simple example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein

answered Jun 15 '14 at 02:25

Wayne Ellery

7,888
1
28
45

I know, but the addClass / removeClass cannot include a fadeIn fadeOut. It has duration but it is not affecting the fade. – FlannelBeard Jun 15 '14 at 02:27
You cannot use add/remove class. You can only fade in/out an element. Here is an example of using fading in different background images: http://stackoverflow.com/questions/17825194/fade-in-background-jquery – Wayne Ellery Jun 15 '14 at 02:34

Jquery Background Fader

2 Answers2