jQuery FadeOut FadeIn Running Multiple Times

Question

What have I got wrong here? Basically I have three radio buttons, and when I click one I want to make all matching Divs fade Out, and then Fade the One matching Div back in.

What actually happens is when I click the radio Button all my Divs fade Out as expected, but then the new one Fades In, then Out, then back In again.

changePage = function()
{
    $('.pageAlt').on('click',function() //click a radio button with class pageAlt
        {
            pageVal=$(this).val(); // get the Value for this button (1,2,3,4)

            $('.divScriptsTableOuter').fadeOut('slow',function() // FadeOut all Divs (as they all have class divScriptsTableOuter)
                {
                    switch (pageVal) // FadeIn the One Div that matches
                        {
                            case "1":
                                $('#divONE').delay(500).fadeIn();
                                break;
                            case "2":
                                $('#divTWO').delay(500).fadeIn();
                                break;
                            case "3":
                                $('#divTHREE').delay(500).fadeIn();
                                break;
                            case "4":
                                $('#divFOUR').delay(500).fadeIn();
                                break;
                            default:
                                $('#divONE').delay(500).fadeIn();
                        }
                })
        })
}

Answer 1

You could do it an another way... Like this:

$(function() {
  $('.pageAlt').on('click', function() {
    var $el = null;
    pageVal = $(this).val();
    switch (pageVal)
    {
      case "1":
        $el = $('#divONE');
        break;
      case "2":
        $el = $('#divTWO');
        break;
      case "3":
        $el = $('#divTHREE');
        break;
      case "4":
        $el = $('#divFOUR');
        break;
      default:
        $el = $('#divFIVE');
    }      
    $('.divScriptsTableOuter').not($el.fadeOut("slow").delay(500).fadeIn()).fadeOut('slow');
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="pageAlt" type="radio" name="val" value="1"> 1
<br>
<input class="pageAlt" type="radio" name="val" value="2"> 2
<br>
<input class="pageAlt" type="radio" name="val" value="3"> 3
<br>
<input class="pageAlt" type="radio" name="val" value="4"> 4
<br>
<input class="pageAlt" type="radio" name="val" value="5"> 5
<div id="divONE" class="divScriptsTableOuter">
  1
</div>
<div id="divTWO" class="divScriptsTableOuter">
  2
</div>
<div id="divTHREE" class="divScriptsTableOuter">
  3
</div>
<div id="divFOUR" class="divScriptsTableOuter">
  4
</div>
<div id="divFIVE" class="divScriptsTableOuter">
  5
</div>

Answer 2

I think that the issue is related to the fadeOut callback which is:

A function to call once the animation is complete, called once per matched element.

Source

Note the "once per matched element", so your callback is called for every matched element once it fades out.

I've reproduced your issue in a jsfiddle. To fix it, you'll have to wait until every element has fade out before you fadeIn the one you want.

Here's my solution:

1. fadeOut everything when dom loads
2. fadeOut only the hidden elements, without waiting for it to finish
3. fadeIn the selected one

Updated fiddle.