动态div内容应该先消失

时间:2013-10-16 15:08:14

标签: javascript jquery

我知道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);
                    }
                });
            }
        });

0 个答案:

没有答案