3

我有两个要在页面上执行的功能。第一个是加载后在我的网站中慢慢淡出的一些 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，所以它可能对这里的人们来说非常明显，在这种情况下，我提前为我的新问题道歉！

4

4 回答 4

5

由于您的评论似乎已满，我将其放在这里

您将需要使用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>
于 2013-08-01T13:16:55.977 回答
4

所以，像

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
  var scrollGalleryObj = new scrollGallery({
    start:0,
    autoScroll: true
  });

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

那么应该工作吗？- 我绝对没有测试过！

于 2013-08-01T13:24:11.187 回答
3

根据 Dave Walsh 的博客，这里有另一个选项http://davidwalsh.name/jquery-mootools

试试这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>

<script>

    //no conflict jquery
    jQuery.noConflict();

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

</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">

    // moo stuff
    window.addEvent('domready', function() {
       var scrollGalleryObj = new scrollGallery({
          start:0,
          autoScroll: true
       });
    });

</script>
于 2013-08-01T13:27:27.297 回答
1

这个链接会帮助你。当我们为 Jquery 使用两个 javascript 框架时，我们可以使用 JQuery 代替 $。即使您可以尝试以下代码：

<script type="text/javascript">
    var $j = jQuery.noConflict();
    jQuery(document).ready(function(){
      var scrollGalleryObj = new scrollGallery({
        start:0,
        autoScroll: true
      });

      if (document.images){
        $j('#container').hide();                        
        $j(window).load(function(){                         
           $j.fx.speeds._default = 1000;                        
           $j("#container").delay(500).fadeIn(2000);                
        });
      }
    });
    </script>
于 2013-08-01T13:42:53.167 回答