Fade in background is not working properly

Question

Not sure if this is possible, but I'm trying to add a fade in to a jquery css change. I tried using the css transition attribute too, to no avail.

Here's how far I've got, but it's not working.

HTML:

<section id="primary" class="home-section-hero">
    <div class="bcg" data-anchor-target="#primary">
        <ul>
            <li data-pid="1">
                <img src=“folder/path”>
            </li>
        </ul>
    </div> <!-- .bcg -->
</section> <!-- #primary -->

CSS:

#primary {
    height: 100%;
    width: 100%;
}

#primary .bcg {
    background: url("images/miscreated-bg.jpg");
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 10px 5px 15px rgba(0, 0, 0, 0.5) inset;
    height: 100%;
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5);
    width: 100%;
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

jQuery:

$( "li[data-pid='1'] img" ).click(function() {
    $( "#primary .bcg" ).fadeIn( "slow", function() {
        $(this).css( "background", "url(http://ericbrockmanwebsites.com/dev7/wp-content/themes/AntCas/player-images/bgs/Titanic-bg.jpg) no-repeat fixed center center / cover  rgba(0, 0, 0, 0)");
    });
});

Any insights?

"Any insights?" is far too broad. You may want to read [how to best ask questions](http://stackoverflow.com/help/how-to-ask). — Anonymous, Sep 03 '14 at 19:49
possible duplicate of [fade in background jquery](http://stackoverflow.com/questions/17825194/fade-in-background-jquery) — LcSalazar, Sep 03 '14 at 19:50
The callback function is executed AFTER the 'slow' fadeIn. So essentially it's going to be a very instant change. — Morklympious, Sep 03 '14 at 19:50
Thanks @Morklympious and forgive my ignorance, learning js as I go. Do you mean that I should first make the css change and then nest the fadeIn in that? thanks! — Eric Brockman, Sep 03 '14 at 19:52
Sounds like you want jQuery UI (deals with animating backgrounds amongst other things). — James Korden, Sep 03 '14 at 19:54
@JamesKorden jQuery UI adds support to animate colors, but fading background images is nothing that is added by jQuery UI. — t.niese, Sep 03 '14 at 19:56

score 0 · Answer 1 · answered Sep 03 '14 at 20:05

You cannot set a transition in between 2 background-image.

You need to set them on top of eachothers into differents containers, than could fade with opacity and z-index for instance: here an example : http://codepen.io/gcyrillus/pen/DJdja

basis is

body:before, body:after {
  content:'';
  top:0;
  left:0;
  bottom:0;
  right:0;
  position:absolute;
  z-index:1;
    background-size: cover;
  animation:bgfade 10s infinite;
  animation-direction: alternate;
  opacity:1;
}

With the body background, you can fade in/out 3 different image. via js, jQuery or CSS.

Fade in background is not working properly

1 Answers1