0

I got this website, www.harispapadakis.eu and I'm using this code 

function changeBackground() {
    ++currentBackground > 2 && (currentBackground = 0),
    $(".c-hero").fadeOut(4e3, function() {
        $(".c-hero").css({
            "background-image": "url('" + backgrounds[currentBackground] + "')"
        }), 
        $(".c-hero").fadeIn(3e3)
    }), 
    setTimeout(changeBackground, 15e3)
}

var currentBackground = 0,
    backgrounds = [];

backgrounds[0] = "media/main.jpg", 
backgrounds[1] = "media/main2.jpg", 
backgrounds[2] = "media/main3.jpg", 
$(document).ready(function() {
    setTimeout(changeBackground, 7500)
});

(edit note: formatted from minified code, in which if is minified to &&, ; is minified to , and 3000 is minified to 3e3)

This code, is changing with FadeIn and FadeOut the background src...

I want to change the fade with slide to left... It's changing the background picture and I want a nice animation..

Thanks in advance

Derek 朕會功夫
  • 84,678
  • 41
  • 166
  • 228
Haris Papadakis
  • 69
  • 2
  • 12
  • What have you tried? SO is **not a free coding or tutorial service**! You have to show that you've put some efford into solving your own problem. Seems to me you simply took some code and you're asking us to change it's behaviour to what you want for you. Evidence being minified code formatted by Derek for you. – icecub Jul 20 '17 at 22:49
  • I found that code on web and I change it a bit. I putted the fade. I don't know if exist something like that I'm asking for, that's why I posted like that. – Haris Papadakis Jul 20 '17 at 22:53
  • Does it exist? Yes. It's called an Image Slider. You would have to program it yourself or download one of the many available libraries for it out there. For example: https://www.jssor.com/ or https://amazingslider.com/ You will still need to change its behaviour to automaticly slide images for you and set them on the background. – icecub Jul 20 '17 at 22:59

1 Answers1

0

This answer may help: How do you fadeIn and animate at the same time?

Rather than using .fadeIn, consider using jQuery's .animate function to perform multiple css transitions.

For example, instead of: 

$(".c-hero").fadeIn(3e3)

Try doing @see http://api.jquery.com/animate/:

$(".c-hero").animate(
   {opacity: 1, left: "-=50"}, // css attributes to animate
   3000, // duration in seconds
   function(){ /**callback function after it completes**/}
 });
Nuspeed1
  • 126
  • 6
  • Read the question again. `It's changing the background picture`. You can't use animate to change pictures. He's looking for an Image Slider. – icecub Jul 20 '17 at 23:00