クリックした後にしばらく経ってから続きの部分が表示されるだけだとつまらないから、クリックしてから続きが読み込まれるまでの間にローディングgifが表示されるようにしてみた。参考にさせてもらったのはhysyskさんのブログ。
ローディングgifはこちらで作った。
コードはこんな感じ。よかったらどなたか添削してください。
function readMore(x) {
// format vars
var id = x.replace("#", "");
var loadPath = '/article.php?id=' + id + ' div#wrapper div[class=comment entry-content]';
var rm = x + ' p.read-more a';
// hide read-more
$(rm).hide();
// write ajax-loader.gif
$(x).append('<div id="loading" style="text-align: right; position: relative; top: -28px;"><img src="./images/ajax-loader.gif" width="28" height="28" /></div>');
// show and hide ajax-loader.gif
$("#loading").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxComplete", function() {
$(this).fadeOut("slow");
});
// load rest of content
$(x).load(loadPath);
}