Question

我正在尝试让窗口滚动到单击时的元素。它正在工作，除非前一个元素之一的slideUp动画触发，点击的元素向上滚过顶部。

注意：将浏览器调整到移动宽度，以便最好地查看问题。此外，这是在投资组合项目中进行的。

以下是代码：

$('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，但您只是延迟500毫秒。 fast与600 ms同义。一般来说，我认为使用两者都是一个坏主意，因为对于阅读代码的人来说这是非常困惑的fast。
我不是使用.delay()方法，而是使用complete或slideDown上的slideUp参数，这样一旦完成，您就会执行滚动。这更有意义，因为您不必担心时间冲突。
我的猜测是你的问题是你的过渡需要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。

Answer 2

试试这个：

$('article.project').on('click','header',function(){
    _parent = $(this).parent();
    if(_parent.hasClass('clicked')){
        // If the clicked project has already been clicked, remove the class and hide the content
        _parent.removeClass('clicked');
               .find('.proj_content')
               .slideUp('fast');

    }else{
        // Remove the class and slide the content up on all projects
        $('article.project').removeClass('clicked')
                            .children('.proj_content')
                            .slideUp('fast');
        // Add the class and show the content on the selected project
        // Slide the project to the top after clicking on it
        _parent.addClass('clicked')
               .find('.proj_content')
               .slideDown('fast',function(){
                   // callback
                   $('html, body').animate({ scrollTop: +(_parent.offset().top)+'px' }, 500);
               });
    }

});

使用.offset（）。top与.slideUp

2 个答案: