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);
                }
            });
        }
    });

whydiv を動的コンテンツで埋めているバージョンで、アニメーションが完了するとフェードアウトし、最初のバージョンでは期待どおりに機能することを知りたいです (つまり、2 回目のクリックで 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);
                    }
                });
            }
        });