使用JavaScript以慢动作替换HTML

我的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（）{
变量html_1=''+
''+
“
注释1”+
''+
''+
''+
“
评论2”+
''+
''+
“展示更多”+
'';
jQuery（“.comment_preview”）.html（“”）；
jQuery（“.comment\u preview”）.html（html\u 1）.toggle（2000）；
}
函数showless（）{
变量html_2=''+
''+
“
注释1”+
''+
''+
''+
“
评论2”+
''+
''+
''+
“
评论3”+
''+
''+
“少展示”+
'';
jQuery（“.comment_preview”）.html（“”）；
jQuery（“.comment\u preview”）.html（html\u 2）.toggle（2000）；
}

在这里，当单击

showmore

和

showless

时，它将替换HTML。 我想用慢动作显示HTML

---

我该怎么做呢？

为什么不试试jQuery的

show（）

和

hide（）

函数，它们带有一个时间参数来降低速度

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

---

您可以使用

fadeIn（）

和

fadeOut（）

生成一个好的效果

我修改了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);
    });

}

函数showmore（）{
jQuery（“.comment_preview”）.fadeOut（1000，function（）{
变量html_1=''+
''+
“
注释1”+
''+
''+
''+
“
评论2”+
''+
''+
“少展示”+
'';
jQuery（“.comment\u preview”）.html（html\u 1）.fadeIn（500）.delay（1000）；
});
}

试试这个

$（文档）.on（'click'，'showmore'，函数（）{
$（“.comment_preview”）.fadeOut（“慢”，函数（）{
//动画完成。
变量html_1=''+
'' +
“
注释1”+
'' +
'' +
'' +
“
评论2”+
'' +
'' +
“少展示”+
'';
$（“.comment\u preview”）.html（html\u 1）.fadeIn（500）.delay（1000）；
});
});
$（文档）.on（'单击'，'.showless'，函数（）{
$（“.comment_preview”）.fadeOut（“慢”，函数（）{
var html_2=''+
'' +
“
注释1”+
'' +
'' +
'' +
“
评论2”+
'' +
'' +
'' +
“
评论3”+
'' +
'' +
“展示更多”+
'';
jQuery（“.comment_preview”）.html（html_2）.fadeIn（500）.delay（1000）；；
})
})

尝试使用此脚本-

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

函数showmore（）{
变量html_1=''+
''+
“
注释1”+
''+
''+
''+
“
评论2”+
''+
''+
''+
“
评论3”+
''+
''+
“少展示”+
'';
jQuery（“.comment_preview”）.html（“”）.hide（）；
jQuery（“.comment\u preview”）.html（html\u 1）.show（2000）；
}
函数showless（）{
jQuery（“.comment_preview”）.hide（2000，function（）{
var html_2='显示更多'；
jQuery（“.comment_preview”）.html（html_2.show（）；
});                    
}

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