javascript - 通过平滑滚动到达 div 后摇动它

Question

我尝试通过平滑滚动在屏幕上显示网页上的 div 内容来摇动它。我有以下 html 代码:

<script src="js/jquery.smooth-scroll.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jrumble.1.3.js"></script>
<ul>
   <li><a href="#one">One</a></li>
   <li><a href="#two">Two</a></li>
   <li><a href="#three">Three</a><li>
   <li><a href="#four">Four</a></li>
</ul>

(...)

<article class="item" id="one">
   <div class="item__info">
     <h2>One</h2>
     <p>Some random text here</p>
   </div>
   <div class="item__img"> 
     <p>Some random image here</p>
   </div>             
</article>

还有我可能搞砸的部分，我指的是 Java 脚本:

<script>
 $('#stands a').on('click', function(e) { 
  var el = $( e.target.getAttribute('href') );
  var elOffset = el.offset().top;
  var elHeight = el.height();
  var windowHeight = $(window).height();
  var offset;

  if (elHeight < windowHeight) {
    offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
  }
  else {
    offset = elOffset;
  }

  $.smoothScroll({ speed: 700 }, offset,


        afterScroll: function() {
            el.jrumble({
                    x: 4,
                    y: 0,
                    rotation: 0
            });

        }
    });
  return false;
 });
</script>

我正在尝试使用我找到的 jRumble 脚本 here . 我想实现一种效果，在单击菜单中的一个链接后，整个页面向下滚动到所选的 div 并振动 2-3 秒。我在这里做错了什么？

Answer 1

在您的smoothscrolling 实现中存在一些语法问题。 正如 jRumble 的文档中所述，您必须在元素上初始化插件后开始动画。

 $.smoothScroll({
        speed: 700,
        offset: offset,
        afterScroll: function () {

            el.jrumble({ //initialize the pluging
                x: 4,
                y: 0,
                rotation: 0
            });

            el.trigger('startRumble'); //start animation
            var demoTimeout = setTimeout(function(){el.trigger('stopRumble');}, 1500); 
            //set Timeout for stopping the animation

        }
    });

Demo

旁注:

• 可以通过 jQuery 原生函数 animate 完成滚动
• shake效果也可以在jQuery-UI中找到