Question

是否可以制作AJAX滑块使用jQuery AJAX调用ASP.NET服务器，

这是HTML：

<ul id="comments" runat="server">

</ul>

我不希望用户发布评论并在他自己的页面中看到li中的幻灯片。浏览网站的任何人都必须能够看到幻灯片。

感谢。

Answer 1

这可以通过少量的JS和一些CSS来解决更改
comments.InnerHtml += "<li>" + dr.GetString(0) + "</li>";
到
comments.InnerHtml += "<li class=\"hide\">" + dr.GetString(0) + "</li>";

以及：

$(document).ready(function () {
    $.ajax({
        url: 'WebForm1.aspx',
        success: function (data) {
            $('#comments').html(data);
            updateC();
        }
    });
});
function updateC(){
    var d = document.getElementsByClassName('hide');
    if(d.length > 1){
        for(var i = 0; i < d.length; i++){
            d[i].setAttribute('class','');
        }
    }
}

然后，添加一个style标记，其中包含以下内容：

.hide{
    height:0px;
    overflow:hidden;
    -webkit-animation: slide 0.5s forwards;     /*'0.5s' is the animation time*/
    -webkit-animation-delay: 0.5s;              /*Delay before the animation*/
    animation: slide 0.5s forwards;             /*'0.5s' is the animation time*/
    animation-delay: 0.5s;                      /*Delay before the animation*/
}
@-webkit-keyframes slide{
    100% { height: 20px; }                      /*Set 20px to the line-height*/
}
@keyframes slide{
    100% { height: 20px; }                      /*Set 20px to the line-height*/
}

当然，您可能希望根据延迟，时间和高度设置更改CSS，但这是一个工作正常的脚手架。

带滑块的jquery AJAX调用

1 个答案: