javascript - 动态 div 内容在它应该消失之前消失

Question

我知道 jQuery 有一个工具提示对象，但我想直接做一些我自己的东西，以便开始使用我不完全理解的东西。我希望动态显示内容，但首先我尝试使用：

css: .hiddenEl{display:none;}

 $(document).ready(function () {
        $('#showElement').click(function () {
            getText()
        });
        function getText() {
            $.ajax({
               //...ajax options
                success: function (data) {
                   //if I use this line of code when a div with 
                    // class hiddenEl is already on the page, it works
                    $('.hiddenEl').text(data.d).fadeToggle();
                   //when I create the div dynamically it fades in
                   //,and immediately fades back out.
                   //var $div = $('<div>').addClass('.hiddenEl').text(data.d).appendTo('body').fadeToggle();
                },
                error: function (xhr) {
                    console.log('failed: ' + xhr.status);
                }
            });
        }
    });

我想知道why在我用动态内容填充 div 的版本中，一旦动画完成，它就会淡出，并且在第一个动画中它按预期工作（这意味着 div 在第二次点击时被隐藏）以及我该如何解决。其次，我想看看我的版本与可能编写自己的自定义工具提示的其他人相比如何

编辑：这是一种做同样事情的非 AJAX 方式。

 $(document).ready(function () {
            $('#showElement').click(function () {
                getText()
            });
            var array = ['first', 'second', 'third'];
            function getText() {
                $.ajax({
                    success: function (data) {
                        console.log('success');
                        //if I use this line of code when a div with 
                        // class hiddenEl is already on the page, it works
                        // $('.hiddenEl').text(data.d).fadeToggle();
                        //when I create the div dynamically it fades in
                        //,and immediately fades back out.

                        var $div = $('<div>').addClass('.hiddenEl').text(array).appendTo('body').fadeToggle();
                    },
                    error: function (xhr) {
                        console.log('failed: ' + xhr.status);
                    }
                });
            }
        });