0

below is jQuery code I have used for cycling advert banner. For some reason the background colour is changing before each image fades out, despite having it the other way around in the code? Does anybody know where I might be going wrong here? Thanks. The '#contentHome' Div is a parent DIV for the cycling adverts inside (the adverts with class .advertSlide). The parent DIV is wider at 100% width and adverts inside have a fixed width. One advert has blue background '#103663" and the other black "#000000". The code aims to change the parent div background colour at each image change.

I'd like to achieve this order:

  • current advert to fade out on it's own background colour (bg colour assigned to the parent DIV: contentHome)
  • Then the background colour and/or background image changes
  • Then next advert div (with image) fades in.

essentially: FadeOut > bg change > FadeIn

At the moment it goes:

  • Background colour changes (so doesn't match advert)
  • Then advert fades out.
  • Then next advert fades in?

so...wrongly doing: bg Change > FadeOut > FadeIn.

Here is my code:

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
    $("#slider > div#myDIV1.advertSlide").fadeIn(1000);
    startSlider();
});


function startSlider() {

count = $("#slider > div.advertSlide").size();

    loop = setInterval(function(){

        if(sliderNext > count) {
                sliderNext = 1;
                sliderInt = 1;
            }

if(sliderNext == 2) {
        $("#slider > div.advertSlide").fadeOut(1000).delay(500);
        $("#contentHome").delay(2000).css("background-image", "url(images/ssBackground2px.png)").css("background-repeat", "repeat").css("background-color","#103663");
            }

if(sliderNext == 1) {
        $("#slider > div.advertSlide").fadeOut(1000).delay(500);
        $("#contentHome").delay(2000).css("background-image", "none").css("background-color", "#000000");               
            }

    $("#slider > div#myDIV" + sliderNext + ".advertSlide").delay(500).fadeIn(1000);
    sliderInt = sliderNext;
    sliderNext = sliderNext + 1;

    }, 10000)

Thanks in advance for any help you can give.

M.F
  • 143
  • 4
  • 17
  • There was previous comment about adding the background colour change as a callback inside the fadeOut. Having just tried this, the code banner still cycles as required but the background colour is still changing before the fadeOut. FadeOut time is 1000 and the background change has a .delay set of 2000. is it the .delay that's the issue? My intention was that this would delay the background change until after the fadeOut had finished. – M.F Mar 04 '15 at 15:38
  • The image fades Out (lets say Blue image) on Blue background. All that is left is the Blue background. This changes to black background. New image now fades in (lets say Black image). This image (after a few seconds) then fades out. Allt hat is left is a black background. This changes to Blue background. The next image fades in. etc. I'm not too sure about what you mean by the mismatch. To me the above order would mean the background always matched the colour of the image? Apologies if I'm missing something here. – M.F Mar 04 '15 at 16:04
  • Thanks Pete, that looks like what I am after, great, not tried it yet but your example functions as I am after. The only thing which I mistakenly put in my question, the div that needs to change colour is one up from the slider div. So it's the Div that contains the 'slider div' and it's children 'advert' divs that needs to change colour, not the Slider Div. Is your code easy to adapt to target the colour change on a different 'selector div'. Also, do you know how well supported the data tag you have used is? Thanks – M.F Mar 04 '15 at 16:29
  • In your example Pete '#slider' defines the size of the slides which is good and as I need, but it's the Div which that #slider sits inside, that needs to be 100% width and have it's background colour change. Thanks for your help. – M.F Mar 04 '15 at 16:39

2 Answers2

0

I don't think delay works on anything except effect based functions such as fadeIn() etc.

You could try using a setTimeout or you could add/remove a class on your ad using jQuery and some use transitions in your CSS.

Then you could animate the background color change smoothly.

elem {
    background-color:blue;
    transition:background-color 2s ease-in-out 1s;
}

elem.alt-state {
    background-color:black;
}

You might need to change the animation duration (2s) and delay (1s) to suit your needs. Also, this won't animate in old versions of IE but most modern browsers should work quite nicely.

Tony Merryfield
  • 383
  • 3
  • 10
  • Thanks Tony, I adapted my code as below and created the two css classes fort. But the background now stays black all the time? – M.F Mar 04 '15 at 17:00
  • if(sliderNext == 2) { $("#slider > div.advertSlide").fadeOut(1000, function() { $("#contentHome").removeClass("blackHome").addClass("blueHome"); }); } if(sliderNext == 1) { $("#slider > div.advertSlide").fadeOut(1000, function() { ("#contentHome").removeClass("blueHome").addClass("blackHome"); }) } – M.F Mar 04 '15 at 17:00
  • When you inspect the element can you see the class changing? – Tony Merryfield Mar 04 '15 at 17:03
  • Ah yes it is, but it's being over ruled by another background-color: #000000 somewhere. I think it might be the initial black I added to the div in the css, so it's black the first time before the jQuery is run? – M.F Mar 04 '15 at 17:11
  • I added the class 'blackHome' to the div as it's default class and removed the bg property I had on the Div in the css, and it now changes colour ok. But annoyingly, it is still changing the background colour before the fadeOut occurs not after. – M.F Mar 04 '15 at 17:15
  • Are you using the transition in your CSS - if so then the last part of the value is the delay before the transition happens; just adjust that value to suit your needs... – Tony Merryfield Mar 04 '15 at 17:17
  • So if the initial fadeOut() has a value of 1000 change the delay on the CSS transition to 1s. transition:background-color .5s ease-in-out 1s; – Tony Merryfield Mar 04 '15 at 17:18
  • I'll try that. I wasn't using the transition as thought it was optional but it makes sense now you say why it would be used. Thanks, I'll try that now. – M.F Mar 04 '15 at 17:23
  • All fade outs are set at 1000 in javascript, the css transition set to 1s. But the background change is still happening before the fadeout. – M.F Mar 04 '15 at 17:28
  • Is this on a server somewhere so I can view? I'm on the train at the moment but can check again when I get back. – Tony Merryfield Mar 04 '15 at 18:02
  • I found the problem, I had also added a transition to the css the other day on the same div as the black property noted above, and this had a delay of 0. It was overruling the new css transitions. I have removed this. It's not quite working, the timings are not right yet, but it's a lot closer and the background change is happening about the same time as the fade out. I'll play around with the fade times and transition delays and try to find what I need. Thanks. – M.F Mar 04 '15 at 18:08
  • Thanks Tony, I think it might just be a bit of trial and error now on the timings. cheers – M.F Mar 04 '15 at 18:09
  • Yes, worked well after tweaking timings. Thanks for your help – M.F Mar 04 '15 at 18:17
0

RaNdoM_PoWneD is correct, that you need to use the fadeOut callback function:

$("#slider > div.advertSlide").fadeOut(1000,
 function()
 {
      $("#contentHome")
          .css("background-image", "url(images/ssBackground2px.png)")
          .css("background-repeat", "repeat")
          .css("background-color","#103663");
 });

I'm not sure why he deleted his answer. The reason the background will change instantly is that jQuery wants the animations to seem asynchronous so that the developer doesn't have to worry about the thread blocking until the animation is done running. Your .fadeOut() call begins animating immediately and is managed by jQuery.

If you want any code to run after the animation is complete, it will need to be inside the complete callback (as I have shown above).

Community
  • 1
  • 1
Alex W
  • 37,233
  • 13
  • 109
  • 109
  • In each of my 'if' statements, the code you have above is what I added, the only difference is I have a .delay(2000) after ("#contentHome") before the .css starts. This was still changing background before the fadeOut. I'll try removing the .delay. – M.F Mar 04 '15 at 16:11
  • After removing the .delay, it still played back in the same order – M.F Mar 04 '15 at 16:47