2

我试图让窗口在点击时滚动到一个元素。它正在工作，除非当先前元素之一的 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);
    }

});

如果有人可以帮助我产生预期的效果，那将是惊人的。提前致谢！

4

2 回答 2

1

有几件事：

  • 你.slideDown()的 s 使用速度fast，但你只是延迟了500毫秒。是女士fast的代名词。600一般来说，我认为同时使用两者是一个坏主意，因为它会让阅读您的代码的人感到非常困惑fast。
  • .delay()我不会使用方法，而是使用or scomplete上的参数，这样一旦它们完成，您就可以进行滚动。这更有意义，因为您不必担心时间冲突。slideDownslideUp
  • 我的猜测是您的问题是由于您的转换需要 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

于 2013-08-17T20:54:35.720 回答
0

尝试这个 ：

$('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);
               });
    }

});
于 2013-08-17T20:54:44.367 回答