jquery - 在 .delay() 中嵌入函数无法正常工作

Question

所以我有一个带有表格的 HTML，每列都有一个按钮，该按钮应该淡出该表格，然后淡入另一个 DIV，其中包含有关我单击的特定列的信息。所以 Jquery 看起来像这样:

  $(document).ready(function(){
    $('#motoBttn').bind('click', function(){
        $('#ServicesContent').fadeOut();
            $('#infoSlector').fadeIn();
            $('#motoDescContent').fadeIn();
            $('#goBackDiv').fadeIn() ;
    })
    $('#goBack').bind('click', function(){
        $('#infoSlector > div').fadeOut() ;
        $('#ServicesContent').fadeIn();
    })
  });

这个#goBack id 是一个按钮，每当我点击任何按钮时都会显示。并且会淡出任何刚刚淡入的东西。

这很好用，但这并不是我想要的。我碰巧在特定时间显示了两个 DIVS。所以你可以在衰落之间的某个点看到一个在另一个之上。

我发现延迟第一次褪色可以产生预期的效果。现在它看起来像这样:

$(document).ready(function(){
        $('#motoBttn').bind('click', function(){
            $('#ServicesContent').fadeOut().delay(800, function (){
                $('#infoSlector').fadeIn();
                $('#motoDescContent').fadeIn();
                $('#goBackDiv').fadeIn() ;

            });

        })

        $('#goBack').bind('click', function(){
            $('#infoSlector > div').fadeOut() ;
            $('#ServicesContent').fadeIn();
        })
      });

但是每当我单击“返回”按钮时，它都会自行淡出，但不会显示 DOM 上的第一个表。

这是 HTML 的样子:

<table id='ServicesContent'>
                <tr>
                    <td class='ServicesIcon'>
                         <img src="images/icon3.png" alt="" />

                    </td>
                </tr>
                <tr>
                    <td class='ServicesPreviewTitle'>
                        <h2>Venta de equipo motorola</h2>

                    </td>
                </tr>
                <tr>
                    <td class='ServicesPreviewContent'>
                        <p>Ceosdach es distribuidor autorizado Motorola. Tenemos todo en radiocomunicación.</p>
                    </td>
                <tr>
                    <td class='ServicesButton'>
                        <button class ="srvcViewBttn" id="motoBttn">Ver Oferta</button>

                    </td>
            </table>
                <div id="infoSlector"class="hidden" >
                    <div id="motoDescContent" class="hidden">
                        <div class= "wholewidhtcontent">
                            <h1>Venta de equipo motorola</h1>
                        </div>
                    </div>
                    <div id="goBackDiv" class="hidden">
                        <div class= "wholewidhtcontent">
                            <button class ="srvcViewBttn" id="goBack">Atrás</button>
                        </div>
                    </div>

                </div>

Answer 1

$.fn.delay不接受任何回调方法，因此您的代码不起作用。

但是您可以使用 $.fn.fadeOut(duration,complete)

duration: A string or number determining how long the animation will run.

complete: A function to call once the animation is complete.

代码

$('#ServicesContent').fadeOut(800, function (){
    $('#infoSlector').fadeIn();
    $('#motoDescContent').fadeIn();
    $('#goBackDiv').fadeIn("hidden");
});