我正在尝试在 jquery 中制作熔岩灯样式。它在 codepen 中工作,但在 jsfiddle 或我自己的网页中不工作。谁能帮我找出问题所在?
J查询代码
// adds sliding underline HTML
jQuery('#menu').append('<li class="slide-line"></li>');
// animate slide-line on click
jQuery(document).on('click', '#menu li a', function () {
var $this = jQuery(this),
offset = $this.offset(),
//find the offset of the wrapping div
offsetBody = jQuery('#box').offset();
// GSAP animate to clicked menu item
TweenMax.to(jQuery('#menu .slide-line'), 0.45, {
css:{
width: $this.outerWidth()+'px',
left: (offset.left-offsetBody.left)+'px',
top: (offset.top-offsetBody.top+$(this).height())+'px'
},
ease:Power2.easeInOut
});
return false;
});
jQuery('#menu > li a').first().trigger("click");
工作演示代码笔
Codepen demo
演示 jsfiddle/正常网页不工作
JSFiddle demo
最佳答案
你缺少这个库
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>
只需将它添加到您的 html 的 head 部分即可。
关于javascript - jquery lavalamp 风格在 codepen 上工作,但在 jsfiddle 上不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26176750/