@taki154

Как корректно выполнить scrollTop() после многократных slideUp, slideDown?

Добрый день! поломал всю голову над jquery-лапшой.

Ее суть. По клику на одной из кнопок вызывается функция с аргументом от 1 до 3 (ее код будет ниже).
Функция позволяет отображать определенную секцию под спойлерами, скрывая при этом остальные.
После всего выполняется скролл к данному фрагменту контента, спойлер которого открывается. Но ввиду анимации, скроллтоп получает в качестве координаты какие-то промежуточные значения.

всю голову поломал над тем, как вычислять координату для скролла корректно, по завершении анимации. заранее спасибо за подсказки.

function smartShow(currentNumber){
  switch (currentNumber) {
    case 1:
      (function(){
        //hide # 2
        $("#more_info_2").css("display", "none");
        $("#content_inner_2").fadeIn("slow");
        //hide # 3
        $("#button_less_3").css("display", "none");
        $("#more_info_3").slideUp("slow")
        $("#button_more_3").fadeIn("slow");
        $(".section_3").removeClass("expanded");
        //show # 1
        $("#button_more_1").css("display", "none");
        $("#button_less_1").css("display", "inline-block");
        $("#more_info_1").slideDown("slow");
      }).promise().done(function() {
        $('html, body').animate({
          scrollTop: $('#section_' +currentNumber).offset().top
        })
      });
      break;

    case 2:
      (function(){
        //hide # 1
        $("#button_less_1").css("display", "none");
        $("#button_more_1").css("display", "inline-block");
        $("#more_info_1").slideUp("slow");
        //hide # 3
        $("#button_less_3").css("display", "none");
        $("#more_info_3").slideUp("slow")
        $("#button_more_3").fadeIn("slow");
        $(".section_3").removeClass("expanded");
        //show # 2
        $("#content_inner_2").css("display", "none");
        $("#more_info_2").slideDown(1000);
      }).promise().done(function() {
        $('html, body').animate({
          scrollTop: $('#section_' +currentNumber).offset().top
        })
      });
      break;

    case 3:
      (function(){
        //hide # 1
        $("#button_less_1").css("display", "none");
        $("#button_more_1").css("display", "inline-block");
        $("#more_info_1").slideUp("slow");
        //hide # 2
        $("#more_info_2").css("display", "none");
        $("#content_inner_2").fadeIn("slow");
        //show # 3
        $("#button_more_3").css("display", "none");
        $("#button_less_3").css("display", "inline-block");
        $("#more_info_3").slideDown("slow")
        $(".section_3").addClass("expanded");
      }).promise().done(function() {
        $('html, body').animate({
          scrollTop: $('#section_' +currentNumber).offset().top
        })
      });
      break;

    default:
      return false;
  }
}
  • Вопрос задан
  • 175 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы