javascript - 将 .offset().top 与 .slideUp 结合使用

Question

我试图让窗口滚动到单击时的元素。它正在工作，除了当前面的元素之一的 SlideUp 动画触发时，单击的元素向上滚动到顶部。

链接如下: http://jtwebfolio.com/mobi

注意:将浏览器尺寸缩小到移动设备宽度，以便更好地看到问题。此外，这也发生在投资组合项目上。

代码如下:

$('article.project header').click(function(){

    if($(this).parent().hasClass('clicked')){
        // If the clicked project has already been clicked, remove the class and hide the content
        $(this).parent().removeClass('clicked');
        $(this).parent().find('.proj_content').slideUp('fast');
    }else{
        // Remove the class and slide the content up on all projects
        $('article.project').removeClass('clicked');
        $('article.project .proj_content').slideUp('fast');

        // Add the class and show the content on the selected project
        $(this).parent().addClass('clicked');
        $(this).parent().find('.proj_content').slideDown('fast');

        // Slide the project to the top after clicking on it
        $('html, body').delay(500).animate({
            scrollTop: $(this).parent().offset().top
        }, 500);
    }

});

如果有人能帮助我达到预期的效果，那就太棒了。提前致谢!

Answer 1

有几件事:

• 您的 .slideDown() 使用的速度fast，但您仅延迟了500ms。 快速与600毫秒同义。一般来说，我认为同时使用这两种方法不是一个好主意，因为对于阅读您的代码的人来说，什么是fast 是非常令人困惑的。
• 我不会使用 .delay() 方法，而是在 slideDown 或 slideUp 上使用 complete 参数code>s，这样一旦完成，您就可以进行滚动。这更有意义，因为您不必担心时间冲突。
• 我的猜测是，您的问题是由于您的转换花费了 600 毫秒而引起的，但您的滚动只等待了 500 毫秒。在 500 毫秒时，它获取了错误的偏移值并滚动到这些值。

• 也许您应该考虑将标记更改为:

  $(this).parent().find('.proj_content').slideDown('600', function() {
    // Slide the project to the top after clicking on it
    $('html, body').animate({
        scrollTop: $(this).parent().offset().top
    }, 500);
  });
  

* 注意:为了清楚起见，我已将 fast 更改为 600。