Question

我有一段代码旨在：上（ '点击'）

淡出元素1
淡入元素2

看起来像：

<html>
    <head>
        <style>
        #element1 {width:200px; height:200px; background-color:red; }
        #element2 {width:200px; height:200px; background-color:green; display:none; }
        </style>

        <script language="JavaScript" src="jquery-min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function()
            {
                $('body').on('click','#element1',function()
                {
                    $('#element1').fadeOut('slow');
                    $('#element2').fadeIn('slow');  
                });

                $('body').on('click','#element2',function()
                {
                    $('#element2').fadeOut('slow');
                    $('#element1').fadeIn('slow');  
                });
            });
        </script>
    </head>
    <body>
        <div id="element1">element1</div>
        <div id="element2">element2</div>
    </body>
</html>

问题是当点击它时它们同时褪色。有没有办法让它首先执行fadeOut，只有一次完成，然后是fadeIn？

Answer 1

您可以像这样使用callback：

$('#element1').fadeOut('slow', function() {
    $('#element2').fadeIn('slow'); 
});

Answer 2

添加一个fadeOut完成后触发的函数，如下所示：

$('#element1').fadeOut('slow', function(){
    $('#element2').fadeIn('slow'); 
});

Answer 3

虽然您需要使用其他选择器淡出fadeIn方法的回调函数。然而，您可以通过以下方式在单个选择器中执行某些操作。

试试这个：

$(document).ready(function(){
    $('body').on('click','[id^="element"]',function(){
         if(this.id === "element1"){
            $('#element1').fadeOut('slow', function(){
                $('#element2').fadeIn('slow');
            });
         }else{
            $('#element2').fadeOut('slow', function(){
                $('#element1').fadeIn('slow');
            });
         }
    });
});

Try the demo fiddle

jQuery-按顺序执行事件，一个接一个

3 个答案: