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。所以你可以在fadings之间的某个点看到一个在另一个之上。

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

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

Answer 1

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

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

持续时间：确定动画运行时间的字符串或数字。

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

代码的

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

在.delay（）中嵌入一个函数不能正常工作

1 个答案: