Jquery: превратить это в функцию? прокрутка тела до #id с дополнительным смещением, скоростью и т. д. - PullRequest
Новая
       39

Jquery: превратить это в функцию? прокрутка тела до #id с дополнительным смещением, скоростью и т. д.

0 голосов
/ 01 февраля 2011

Я пытаюсь создать функцию, которую я могу использовать снова и снова.Я настроил его так, что если ссылка указывает на идентификатор на странице, которая является H2, то она будет прокручиваться к цели со смещением + 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

speed = 1500

Очевидно, мне нужна помощь в создании этой функции, или, если вы думаете, вы могли бы сделать ее более эффективной, чем мой маленький примервыше, пожалуйста, поделитесь.

1 Ответ

1 голос
/ 01 февраля 2011

Это довольно просто, вы, вероятно, думаете об этом: 

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 );
}
...