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>

我正在尝试使用我找到的here的jRumble脚本。我希望实现一种效果，在单击菜单中的一个链接后，整个页面向下滚动到所选的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
也可以在jQuery-UI

shake

通过平滑滚动来到达之后摇动div

1 个答案: