Question

我的HTML在下面给出

<div class="comment_preview"><div class="showmore" onclick="showmore()" style="">Show more <i class="fa fa-arrow-circle-down"></i></div></div>

我的javascript：

function showmore(){ 
    var html_1= '<div class="two_comment_div" >'+   
    '<div class="comment-row comment-row-1 comment-">'+
    '<p class="commentBody">Comment 1</p>'+
    '</div>'+
    '</div>'+
    '<div class="comment-row comment-row-2 comment-">'+
    '<p class="commentBody">Comment 2</p>'+
    '</div>'+
    '</div>'+
    '<div class="showless" onclick="showless()" style="">Show More <i class="fa fa-arrow-circle-down"></i></div>'+
    '</div>';
    jQuery(".comment_preview").html('');
    jQuery(".comment_preview").html(html_1).toggle(2000);
}
function showless(){ 
    var html_2= '<div class="another_two_comment_div" >'+   
    '<div class="comment-row comment-row-1 comment-">'+
    '<p class="commentBody">Comment 1</p>'+
    '</div>'+
    '</div>'+
    '<div class="comment-row comment-row-2 comment-">'+
    '<p class="commentBody">Comment 2</p>'+
    '</div>'+
    '</div>'+
    '<div class="comment-row comment-row-2 comment-">'+
    '<p class="commentBody">Comment 3</p>'+
    '</div>'+
    '</div>'+
    '<div class="showmore" onclick="showmore()" style="">Show Less <i class="fa fa-arrow-circle-up"></i></div>'+
    '</div>';
    jQuery(".comment_preview").html('');
    jQuery(".comment_preview").html(html_2).toggle(2000);
}

点击showmore和showless时，它会替换HTML。我想以慢一点的速度显示HTML。

我该怎么做？

Answer 1

您可以使用fadeIn()和fadeOut()生成效果

Here is a nice demo

我已经改变了showmore（）函数，如下所示，

function showmore(){ 
        jQuery(".comment_preview").fadeOut(1000,function(){
            var html_1= '<div class="two_comment_div" >'+   
                                    '<div class="comment-row comment-row-1 comment-">'+
                                            '<p class="commentBody">Comment 1</p>'+
                                        '</div>'+
                                    '</div>'+
                                    '<div class="comment-row comment-row-2 comment-">'+
                                            '<p class="commentBody">Comment 2</p>'+
                                        '</div>'+
                                    '</div>'+
                                    '<div class="showless" onclick="showless()" style="">Show less <i class="fa fa-arrow-circle-up"></i></div>'+
                                '</div>';

                       jQuery(".comment_preview").html(html_1).fadeIn(500).delay(1000);
    });

}

Answer 2

试试这个fiddle。

$(document).on('click', '.showmore', function() {
    $(".comment_preview").fadeOut("slow", function() {
        // Animation complete.

        var html_1 = '<div class="two_comment_div" >' +
            '<div class="comment-row comment-row-1 comment-">' +
            '<p class="commentBody">Comment 1</p>' +
            '</div>' +
            '</div>' +
            '<div class="comment-row comment-row-2 comment-">' +
            '<p class="commentBody">Comment 2</p>' +
            '</div>' +
            '</div>' +
            '<div class="showless" style="">Show less <i class="fa fa-arrow-circle-up"></i></div>' +
            '</div>';
        $(".comment_preview").html(html_1).fadeIn(500).delay(1000);
    });
});
$(document).on('click', '.showless', function() {
    $(".comment_preview").fadeOut("slow", function() {
        var html_2 = '<div class="another_two_comment_div" >' +
            '<div class="comment-row comment-row-1 comment-">' +
            '<p class="commentBody">Comment 1</p>' +
            '</div>' +
            '</div>' +
            '<div class="comment-row comment-row-2 comment-">' +
            '<p class="commentBody">Comment 2</p>' +
            '</div>' +
            '</div>' +
            '<div class="comment-row comment-row-2 comment-">' +
            '<p class="commentBody">Comment 3</p>' +
            '</div>' +
            '</div>' +
            '<div class="showmore" style="">Show more <i class="fa fa-arrow-circle-down"></i></div>' +
            '</div>';
        jQuery(".comment_preview").html(html_2).fadeIn(500).delay(1000);;
    })
})

Answer 3

为什么不尝试jQuery的show()和hide()函数以及时间参数来减慢速度！

    $(*element*).click(function(){
        $(*element*).showless(*delayTime_in_millisecs*);
    });
    $(*element*).click(function(){
        $(*element*).showmore(*delayTime_in_millisecs*);
    });

Answer 4

尝试使用此脚本 -

function showmore(){ 
                    var html_1= '<div class="two_comment_div" >'+   
                                    '<div class="comment-row comment-row-1 comment-">'+
                                            '<p class="commentBody">Comment 1</p>'+
                                        '</div>'+
                                    '</div>'+
                                    '<div class="comment-row comment-row-2 comment-">'+
                                            '<p class="commentBody">Comment 2</p>'+
                                        '</div>'+
                                    '</div>'+
                                    '<div class="comment-row comment-row-2 comment-">'+
                                            '<p class="commentBody">Comment 3</p>'+
                                        '</div>'+
                                    '</div>'+
                                    '<div class="showless" onclick="showless()" style="">Show less <i class="fa fa-arrow-circle-up"></i></div>'+
                                '</div>';
                       jQuery(".comment_preview").html('').hide();
                       jQuery(".comment_preview").html(html_1).show(2000);
}
function showless(){
                    jQuery(".comment_preview").hide(2000,function(){
                    var html_2= '<div class="showmore" onclick="showmore()" style="">Show more <i class="fa fa-arrow-circle-down"></i></div>';                    
                    jQuery(".comment_preview").html(html_2).show();
                    });                    
}

使用JavaScript以慢动作替换HTML

4 个答案: