在.delay（）中嵌入函数无法正常工作

debugcn 发表于 Dev

艾尔·罗哈斯（Ale Rojas）

因此，我有一个带表的HTML，每个列都有一个按钮，该按钮应淡出该表，然后淡入另一个DIV，该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();
        })
      });

但是，每当我单击“ goBack”按钮时，它就会淡出，但不会显示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>

萨帕尔

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

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

持续时间：一个字符串或数字，确定动画将运行多长时间。

complete：动画完成后调用的函数。

代码

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。