通过平滑滚动到达后,抖动div
问题描述:
我尝试通过在屏幕上平滑滚动,尽快将网页div的内容抖动到屏幕上。我有以下的html代码:通过平滑滚动到达后,抖动div
<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秒。我在这里做错了什么?
答
您的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
}
});
图片的标题说明:
- 滚动可以通过jQuery的本地函数来完成
animate
- 的shake效果也可以在jQuery的UI
谢谢,就是这样! – randomuser1