javascript - 带滑块的 jquery AJAX 调用

Question

是否可以通过对 ASP.NET 服务器的 jQuery AJAX 调用来制作 AJAX 滑块，

这是 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，但这是一个可以正常工作的脚手架。