Question

我在这里遇到了什么问题？基本上我有三个单选按钮，当我点击一个时，我想让所有匹配的Div淡出，然后淡出一个匹配的Div。

实际发生的事情是当我点击单选按钮所有我的Divs按预期淡出时，然后新的淡入淡出，然后退出，然后再次返回。

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

我认为该问题与fadeOut回调相关，即：

动画完成后调用的函数，每个匹配元素调用一次。

Source

注意“每个匹配元素一次”，因此一旦淡出，每个匹配元素都会调用回调。

我已在jsfiddle中复制了您的问题。要解决这个问题，你必须等到每个元素都淡出为fadeIn你想要的那个。

这是我的解决方案：

fadeOut所有内容
fadeOut只隐藏元素，而不是等待它完成
fadeIn所选的

Updated fiddle

Answer 2

你可以用另一种方式做到这一点......就像这样：

$(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>

jQuery FadeOut FadeIn运行多次

2 个答案: