Javascript: My function animation is not working?

Question

I needed to create a function that changes and animates the background image, to give it a cool fade-in effect when triggered. However I have run into a weird issue. So as for my function below, it works, in the sense that it changes the background image when run. But it does not animate. It just instantly changes the background image. I have tried messing with the "transition" property, using background, background-image, and others, but to no avail. Can someone help me understand why the animation part is failing to trigger?

function postBackgroundImage(url){
    var bg = dom.el("topLayer");
    bg.src = url;
    bg.style.backgroundImage = "url("+bg.src+")";
    bg.style.transition = "all 2s linear 1s";
}

Maybe you should assign the transition before you change the background — Chiller, Jun 26 '17 at 14:03
css gradually changes the numeric values in the css properties where you apply the transition. A background image doesn't have numeric values to gradually change. You should use multiple images or multiple elements with background, and change the opacity with transition to apply a fade in effect. — mikepa88, Jun 26 '17 at 14:09
Possible duplicate of [Changing Background Image with CSS3 Animations](https://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations) — shaochuancs, Jun 26 '17 at 14:10
@shaochuancs that was about having all the transition frames in separate images and animating the change. Shawn doesn't have the frames, what he wants is for the browser to interpolate the frames between one image and another — mikepa88, Jun 26 '17 at 14:13
I found out that my FF browser, which I use as my default, does not do it. But when I open up chrome, there is a fade-in animation. — Shawn, Jun 26 '17 at 14:15
@mikepa88 actually, I think the solution is the same. Please check Rich Bradshaw's answer in that question. It is similar to your proposal :) — shaochuancs, Jun 26 '17 at 14:16

score 0 · Answer 1 · answered Jun 26 '17 at 14:17

You can use a Jquery Plugin

http://jquery.malsup.com/cycle/

include library

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

For fade effect use

$('.pics').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});

html

<div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div>

css

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 

.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
}

Javascript: My function animation is not working?

1 Answers1