ASP.NET サーバーへの jQuery AJAX 呼び出しで AJAX スライダーを作成することは可能ですか?
これはHTMLです:
<ul id="comments" runat="server">
</ul>
ユーザーがコメントを投稿して、自分のページでスライドを表示したくありません。スライドインは、Web サイトを閲覧しているすべてのユーザーに表示される必要があります。
ありがとう。
ASP.NET サーバーへの jQuery AJAX 呼び出しで AJAX スライダーを作成することは可能ですか?
これはHTMLです:
<ul id="comments" runat="server">
</ul>
ユーザーがコメントを投稿して、自分のページでスライドを表示したくありません。スライドインは、Web サイトを閲覧しているすべてのユーザーに表示される必要があります。
ありがとう。
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.