この関数を見て、最後の要素のフェードインが完了した後にコールバック関数を追加して実行する方法を説明することで、誰かが私に手を差し伸べて助けてくれませんか。私が探している結果を得るためにコードを編集するか、コードを作り直してください。
コードはこちらFiddle
ありがとうございました
これは正確には正確な答えではありませんが、1つのアプローチは、next()
要素があるかどうかを評価し、関数を再呼び出しするか、別のアクションを実行することです。
function elFadeIn(elem) {
elem.fadeIn('slow', function() {
if ($(this).next().length) {
elFadeIn($(this).next());
}
else {
alert('finished');
}
});
}
そして、少しきれいな書き方は次のようになります。
function elFadeIn(elem, callback) {
elem.fadeIn('slow', function() {
var next = $(this).next(),
action = next.length ? elFadeIn(next) : alert('finished!');
});
}
コールバックを使用することは、関数を引数として渡し、特定の時間にその関数を呼び出すことに他なりません。余談ですが、すべての.item
要素が必要だと思いますが.next
、元のセレクターは気にしません。http://jsfiddle.net/4Pvmq/6/
$(function(){
elFadeIn('.item', function() {
alert("done");
});
});
function elFadeIn(selector, callback) {
var $items = $(selector);
// this is the function that's going to be called recursively
(function fade(i) {
var $elem = $items.eq(i);
if($elem.length) { // there is an element
$elem.fadeIn('slow', function() { // fade it
fade(i + 1);
});
} else { // no elements left
callback();
}
})(0); // start with first
}