Search code examples
jqueryaddclassremoveclass

Adding and removing classes from other divs after using jQuery fadeIn() in slideshow

I've made a slideshow using jQuery. It uses the fadeIn and fadeOut methods. This works fine.

What I need help with is adding a css class to another div, depending on which slide is shown. I've added some shortened code to JSfiddle so you can get a better idea what I mean.

http://jsfiddle.net/dRqKM/

I want the pink boxes to become highlighted when the corresponding slide is shown.

Adding the following, doesn't seem to work:

if ($("#firstSlide").css("display") == "block") {
    $("#div1").addClass("Highlight");
    $("#div2").removeClass("Highlight");
    $("#div3").removeClass("Highlight");
}
Solution

  • Three major problems:

    1. The specificity of .Highlight is the same as .button and because .Highlight comes first in the CSS definition, the bg color from .button is winning out and keeping it pink. Give it higher specificity or higher importance (e.g. div.Highlight or .button.Highlight or use !important)
    2. Your code doesn't take into account rotation -- when you click the next/prev button. So whatever turns green will just stay green because you're not rotating it.
    3. your code that checks (the if/else if/else if block) was wrong. The if looked ok but the other two condition blocks were wrong. I'm going to assume that was just a demo typo. But I fixed it in my example.

    http://jsfiddle.net/dRqKM/1/ See this fiddle for a working version. Note that if you want the box to turn BEFORE the fade ends, just move the call to changeActiveChild to be after the fadeIn call instead of inside the callback function, e.g. http://jsfiddle.net/dRqKM/6/