Question

我在jQuery中有一个关于执行顺序的奇怪问题。下面的代码与设计的工作方式非常相似，但是在动画和动画消除之后，最后附加的closeButton div出现在动画之前。

导致这种行为的原因是什么，以及处理它的最佳方式是什么？

        $('.infoRight .hoverIcon').click(
            function(){
                $(this).hide();//hide hover icon. Needed as it would otherwise remain visible until mouse-off
                $(this).parent()
                    .clone(false)//create a copy of the item
                    .addClass('expandinator')//give appropriate classes to ensure appropriate styling
                    .addClass('expandinatorright')
                    .appendTo($(this).parent());//place clone in its parent.
                $('.expandinatorright').animate({//change to colour for expanded info
                    backgroundColor: "#FFFFFF",
                    color: "#124191"
                }, 300 , function() {
                    $('.expandinatorright').animate({//biggify
                        width: "510px"
                    }, 150, function() {
                        $('.expandinatorright').css('overflow', 'visible', function() {});//remove overflow protection
                        $('<div class="closeButton"></div>').appendTo('.expandinatorright');//add a close button
                    });
                });
            }
        );

Answer 1

您可以在此处将display:none属性添加到“closeButton”类中。一旦你完成了动画的东西，做一些像$（“。closeButton”）。show（）; 事实上，您甚至可以将show（）函数与您当前正在执行的操作链接起来，例如： -

$('.infoRight .hoverIcon').click(
            function(){
                $(this).hide();//hide hover icon. Needed as it would otherwise remain visible until mouse-off
                $(this).parent()
                    .clone(false)//create a copy of the item
                    .addClass('expandinator')//give appropriate classes to ensure appropriate styling
                    .addClass('expandinatorright')
                    .appendTo($(this).parent());//place clone in its parent.
                $('.expandinatorright').animate({//change to colour for expanded info
                    backgroundColor: "#FFFFFF",
                    color: "#124191"
                }, 300 , function() {
                    $('.expandinatorright').animate({//biggify
                        width: "510px"
                    }, 150, function() {
                        $('.expandinatorright').css('overflow', 'visible', function() {});//remove overflow protection
                        $('<div class="closeButton"></div>').appendTo('.expandinatorright').show();//add a close button
                    });
                });
            }
        );

jQuery执行顺序 - 动画前的附加信息

1 个答案: