0

何度も使える関数を作ろうとしています。リンクがH2であるページ上のIDを指している場合、+ 10pxのオフセットでターゲットにスクロールし、矢印を数回フェードインおよびフェードアウトするように設定しました。ただし、リンクが#footer要素を指している場合は、ページを下にスクロールし、ターゲットに到達すると、背景色を青から水色に数回変更してから、青に戻します。

これで関数を作成する最も効率的な方法は何でしょうか？だから私はコードを繰り返し続けませんか？

var target = $(this).attr("href"); ...............
        if ($(target).is('#foot_wrapper')) {
            $('html,body').delay(600).animate({
                     scrollTop: $(target).offset().top - $(window).height() + 139
            }, 1500, function () {
                $('#bottomline').animate({
                    backgroundColor: "#2f5e9f"
                }, 300).animate({
                    backgroundColor: "#76acfb"
                }, 300)

            }) 
        } else if ($(target).is('#header')) { etc. etc. etc.

上記の私のコードのいくつかを使用して、このようなものだと思います...：

function scrollToAnimate (ifTargetIsThis, yOffset, speed, callback)

ifTargetIsThis =#foot_Wrapper

yOffset =- $(window).height() + 139

速度=1500

明らかに、この関数を作成するのに助けが必要です。または、上記の私の小さな例よりも効率的にすることができると思われる場合は、共有してください。

4

1 に答える 1

1

これはかなり簡単です、あなたはおそらくそれを考えすぎています：

var scrollToAnimate = function ( yOffset, speed, callback ) {
  $('html,body').delay(speed*0.4).animate({
    scrollTop: $(target).offset().top + yOffset
  }, speed, callback});
}

ifTargetIsThis関数の外でまだ発生するはずなので、引数を省略していることに注意してください。これは次のように呼び出します。

if ($(target).is('#foot_wrapper')) {
  scrollToAnimate( -$(window).height() + 139, 1500, function () {
    $('#bottomline').animate({backgroundColor: "#2f5e9f"}, 300)
                    .animate({backgroundColor: "#76acfb"}, 300);
  });
} else if ($(target).is('#header')) {
  scrollToAnimate( etc, etc, etc );
}
于 2011-02-01T18:36:46.300 に答える