我正在尝试使用两个(如果考虑到第二个使用 2 个文件,则三个)不同的插件,jPanelMenu.js(做类似谷歌移动的菜单)和 Superscrollorama.js(与 TweenMax.js 一起工作),不幸的是它们是冲突,单独工作时都可以正常工作,但是当我将它们都放在页面上时,一切都崩溃了。我已经尝试使用 $.noConflict(); 和 jQuery.noConflict(); 以很多不同的方式,不成功。我设法做的最好的事情是让 scrollorama/tweenmax 工作。但是,jPanelMenu 仍然崩溃。
这是我的代码:
<script type="text/javascript" src="public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="public/js/jquery.jpanelmenu.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function () {
var jPM = $.jPanelMenu({
menu: '#menu',
trigger: '.menu-trigger',
easing: 'ease',
duration: 250
});
jPM.close(true);
jPM.on();
jPM.trigger(onClick);
});
</script>
<script type="text/javascript" src="public/js/TweenMax.min.js"></script>
<script type="text/javascript" src="public/js/jquery.superscrollorama.js"></script>
<script>
jQuery(document).ready(function($) {
var controller = jQuery.superscrollorama({
playoutAnimations: true
});
controller.triggerCheckAnim();
controller.addTween('.scroll-trigger',
(new TimelineLite())
.append([
// Scale Logo
TweenMax.fromTo(jQuery('#logo'), 1,
{css:{width: '100%', padding:'15px 0 0 0'}, ease:Strong.easeInOut, immediateRender:true},
{css:{width: '59%', padding:'5px 0 0 0'}, ease:Strong.easeInOut})
]),0,0);
});
</script>
如果有人能帮我解决这个问题,我真的很感激..