javascript - スライダーを使用したjquery AJAX呼び出し

Question

ASP.NET サーバーへの jQuery AJAX 呼び出しで AJAX スライダーを作成することは可能ですか?

これはHTMLです：

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

</ul>

ユーザーがコメントを投稿して、自分のページでスライドを表示したくありません。スライドインは、Web サイトを閲覧しているすべてのユーザーに表示される必要があります。

ありがとう。

Answer 1

This can be solved with a small amount of JS and some CSS.
Change
comments.InnerHtml += "<li>" + dr.GetString(0) + "</li>";
to
comments.InnerHtml += "<li class=\"hide\">" + dr.GetString(0) + "</li>";

along with:

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

Then, add a style tag with the following inside:

.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*/
}

Of course, you may want to change the CSS depending on delays, timing and height settings, but that is a scaffold that works fine.