Jquery background div slideshow?

Question

I am a little versed in different posts, but nothing really helped, except for this one, which I am going to show you from jAndy.

Basically, I want to be able to put the slide show in the BACKGROUND div.

As long as I have the following code, as you can see ... it fadesIn, shows the image, fadesOut to white, switches the image, then disappears to show the NEW picture .... I just would like Fade to merge instead to disappear, and the other will disappear. I know this is fairly open, but can someone point me in the right direction?

var images = [ '/slideshow1.jpg', '/slideshow2.jpg', '/slideshow3.jpg' ]; loop = 0; $home = $('#slideme'); (function fader(){ $home.fadeOut(1300, function(){ $home.css('background', 'url(' + images[loop] + ') top center no-repeat'); $home.fadeIn(1300, function(){ setTimeout(fader, 9000); }); }); if(loop < images.length -1) loop++; else loop = 0; })(); 

I sincerely appreciate any help!

Answer 1

jsBin demo

You cannot X-fade 2 background images at a time to force an element to support only one BG image. At least not overlapping background images. (correct me if I am wrong)
Instead, you can read your URLs, create real images and add them to the element you need:

 var images = [ '/slideshow1.jpg', '/slideshow2.jpg', '/slideshow3.jpg' ]; var imagesN = images.length; var $slideme = $('#slideme'); for(i=0;i<imagesN;i++){ $('<img>',{ src : images[i] }).appendTo( $slideme ); } 

// NOW YOUR IMAGES ARE CLOSING, DON'T FORGET THE CSS OF THEM: position:absolute; to get one or the other.

How can you use my jQuery plugin to gradually transform your images. The plugin allows you to pause on a hover , as well as click on the image to advance !

 /* FadeMe 'FPS' // jQuery plugin // Author: Roko C. Buljan (2012) // www.roxon.in */ (function($){ $.fn.fademe = function(F,P,S){ F=F||700; // Fade time (default) P=P||3000; // Pause time (default) S=S-1||0; // Start from 1st image (default) var e=this.children(),T; function a(){ e.eq(S=++S%e.length).fadeTo(F,1).siblings(e).stop(1).fadeTo(F,0); } e.on('mouseenter mouseleave click',function(e){ var m=e.type==='mouseenter'?clearTimeout(T):(e.type==='click'?a():aa()); }).eq(S).show().siblings(e).hide(); function aa(){T=setTimeout(function(){a();aa();},F+P);}aa(); }; })(jQuery); $slideme.fademe(); // initiate plugin on your element 

Remembering "FPS", for example: "Frame-Per-Second" :), you can easily change / override the default values ​​for the plugin:

 $slideme.fademe(1300, 9000, 1); 

leading to 1300ms fade; 9000 pause Start with the “1st” image (default). To skip some defaults to achieve a property you can do:

 $slideme.fademe(0, 0, 2); 

which will be translated into: default Fade (700); default Pause (3000); but start with the second image.

---

EDIT , if you want to use background images, follow these steps:

jsBin demo 2