2

オプションのエフェクトコールバック関数を使用できる小さなスクロールメソッドを作成するために、さまざまな方法を試しています。scrollToEl(el, flash) を実行すると、最初に要素までスクロールしてフラッシュします。通常、これについてどうすればよいでしょうか？

これは私がやったことです..しかし、実際には機能していません。

scrollToEl : function(el, callback) {
    // flash the selected product
    var self = this;
    $('html, body').animate({
        scrollTop: el.offset().top - 50
    }, 1000, 'swing', callback); // how to pass el here as well paired with callback?
}

flash : function(el) {
    // flash the selected product
    el.animate({
        opacity : 0.4
    }, 100, 'swing', function() {
        el.animate({
            opacity : 1
        }, 1000, 'swing');
     });
},

私はそれを次のように使いたいです：

var el = $('#element');
scrollToEl(el, flash); // how to pass in to the callback function flash?
4

2 に答える 2

3

クロージャーを使用できます：

scrollToEl : function(el, callback) {
    // flash the selected product
    var self = this;

    // Get completion callback if any
    var completion;
    if (callback) {
        completion = function() {
            callback(el); // See below if you prefer `el` to be `this` in the callback
        };
    }
    else {
        completion = $.noop;
    }
    $('html, body').animate({
        scrollTop: el.offset().top - 50
    }, 1000, 'swing', completion);
}

クロージャーの詳細: クロージャーは複雑ではありません

コールバックで要素を として受け取りたい場合は、独自のラッパー関数の代わりにthis使用できます。jQuery.proxy

scrollToEl : function(el, callback) {
    // flash the selected product
    var self = this;

    $('html, body').animate({
        scrollTop: el.offset().top - 50
    }, 1000, 'swing', callback ? $.proxy(callback, el) : $.noop);
}

proxy関数を作成するため、同じことになります。しかし、 への呼び出しのコンテキストでクロージャーを導入しませんscrollToEl。

于 2012-05-04T08:46:30.203 に答える
2

thisコールバックが影響を受ける要素をパラメータとしてではなく持つ方がより普通です:

flash : function() {
    // flash the selected product
    $(this).animate({
        opacity : 0.4
    }, 100, 'swing', function() {
        $(this).animate({
            opacity : 1
        }, 1000, 'swing');
     });
}

次に、呼び出されたときに.callor.applyを使用してバインドするelクロージャーを使用します。this

$('html, body').animate({
    scrollTop: el.offset().top - 50
}, 1000, 'swing', callback ? function() {
    callback.call(el);
} : undefined);
于 2012-05-04T08:54:01.683 に答える