別のページから読み込まれたデータをティッカー効果でアニメーション化したい。
私はオンラインで見つけた1つの例でこれを行うことができました。
ここでの私の問題は、このエフェクトをajaxがロードされているときにのみ機能させたいということです。
だから私は自分のajaxコードを中に入れて.whenティッカー効果を入れて試してみました.done
しかし、それはこのようには機能しませんでした。
他に何を試すことができますか？
$(document).ready(function() {
$(function CheckinMap() {
$.when($.ajax({
type: "GET",
url: "default.cs.asp?Process=ViewCheckins",
success: function(data) {
$(".newsfeed").append(data);
},
error: function(data) {
$(".newsfeed").append(data);
}
})).done();
});
});
var delay = 2000; // you can change it
var count = 5; // How much items to animate
var showing = 3; //How much items to show at a time
var i = 0;
function move(i) {
return function() {
$('#feed'+i).remove().css('display', 'none').prependTo('.newsfeed');
}
}
function shift() {
var toShow = (i + showing) % count;
$('#feed'+toShow).slideDown(1000, move(i));
$('#feed'+i).slideUp(1000, move(i));
i = (i + 1) % count;
setTimeout('shift()', delay);
}
$(document).ready(function() {
setTimeout('shift()', delay);
});
外部データ
<div class="metadata" id="feed0">
<div class="userinfo">
<span><strong> </strong> @ Amphi I @ NY</span>
<span></span>
<span>-5276 seconds ago</span>
</div>
<div class="commonfriends">
</div>
<div class="tools">
</div>
</div>
<div class="metadata" id="feed1">
<div class="userinfo">
<span><strong> </strong> @ Flaming Buddha House</span>
<span></span>
<span>18 hours ago</span>
</div>
<div class="commonfriends">
</div>
<div class="tools">
</div>
</div>
<div class="metadata" id="feed2">
<div class="userinfo">
<span><strong> </strong> @ Bar @ NY</span>
<span></span>
<span>19 hours ago</span>
</div>
<div class="commonfriends">
</div>
<div class="tools">
</div>
</div>
<div class="metadata" id="feed3">
<div class="userinfo">
<span><strong> </strong> @ Gym @ NY</span>
<span></span>
<span>8 hours ago</span>
</div>
<div class="commonfriends">
</div>
<div class="tools">
</div>
</div>
<div class="metadata" id="feed4">
<div class="userinfo">
<span><strong> </strong> @ Bar @ NY</span>
<span></span>
<span>yesterday</span>
</div>
<div class="commonfriends">
</div>
<div class="tools">
</div>
</div>
<div class="metadata" id="feed5">
<div class="userinfo">
<span><strong> </strong> @ NY</span>
<span></span>
<span>yesterday</span>
</div>
<div class="commonfriends">
</div>
<div class="tools">
</div>
</div>