javascript – 如何结合其他JS框架运行JQuery(这里：mootools)？

我有两个我想在页面上执行的功能.首先是一些jQuery在加载时在我的网站中慢慢消失.第二个是自动滚动div的一些javascript.我遇到的问题是让他们在同一页面上工作.另外他们工作正常.代码如下所示：

<head>

<link rel="stylesheet" type="text/css" href="style.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="mootools-core-1.3.1-full-nocompat.js"></script>
<script type="text/javascript" src="mootools-1.3.1.1-more.js"></script>
<script type="text/javascript" src="scrollgallery.js"></script>

<script type="text/javascript">
window.addEvent('domready', function() {
   var scrollgalleryObj = new scrollgallery({
      start:0,
      autoScroll: true
   });
});
</script>

<script>
$(document).ready(function(){
   if (document.images){
     $('#container').hide();                        
     $(window).load(function(){                         
        $.fx.speeds._default = 1000;                        
        $("#container").delay(500).fadeIn(2000);                
     });
   }
});
</script>

</head>

任何人对我做错了什么都有任何建议.我还在学习javascript,所以它可能会对这里的人们显而易见,在这种情况下,我提前为我的新问题道歉！

解决方法:

由于你的评论似乎已经填满了,我会把它放在这里

你需要使用jQuery.noConflict(),因为你在mootools和jquery中有2个冲突的javascript库

除此之外,正如imsoP指出的那样,您只需要使用一个Domready事件,并将所有代码放入一个这样的包装器中(未经测试)

<script type="text/javascript">
window.addEvent('domready', function() {
   var scrollgalleryObj = new scrollgallery({
      start:0,
      autoScroll: true
   });

    var j = jQuery.noConflict();
       if (document.images){
          j('#container').hide();                        
          j(window).load(function(){                         
             j.fx.speeds._default = 1000;                        
             j("#container").delay(500).fadeIn(2000);                
         });
       }
});
</script>

javascript – 如何结合其他JS框架运行JQuery(这里：mootools)？

相关文章