Question

我需要使用三种不同的脚本＆gt;＆gt; jquery-1.2.6.min.js，jquery-1.4.2.min.js和jquery-1.9.0.min.js

导航菜单栏需要第一个，第二个用于主页上的气泡效果，第三个用于打开花式框。

但是在使用之后，休息两个不起作用。在休息时，我使用了无冲突，它起作用了。但是当第一次使用时，没有任何工作......只有泡泡效果（即第一个 - 1.4.2.min.js）正在工作。

所有代码如下：

对于气泡效果：

    <script type="text/javascript" src="jshome/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jshome/jquery.easing.1.3.js"></script>
    <script type="text/javascript">

        $(function() {
            $('#nav > div').hover(
            function () {
                var $this = $(this);
                $this.find('img').stop().animate({
                    'width'     :'210px',
                    'height'    :'210px',
                    'top'       :'-25px',
                    'left'      :'-25px',
                    'opacity'   :'1.0'
                },500,'easeOutBack',function(){
                    $(this).parent().find('ul').fadeIn(700);
                });

                $this.find('a:first,h2').addClass('active');
            },
            function () {
                var $this = $(this);
                $this.find('ul').fadeOut(500);
                $this.find('img').stop().animate({
                    'width'     :'52px',
                    'height'    :'52px',
                    'top'       :'0px',
                    'left'      :'0px',
                    'opacity'   :'0.1'
                },5000,'easeOutBack');

                $this.find('a:first,h2').removeClass('active');
            }
        );
        });
    </script>

导航菜单效果：

 <script type="text/javascript" src="jsnav/jquery-1.2.6.min.js"></script>
 <script type="text/javascript" src="jsnav/jquery.bgpos.js"></script>

 <script type="text/javascript">
 var $j = jQuery.noConflict();
 $(function(){

     $j('#b a')
         .css( {backgroundPosition: "0 0"} )
         .mouseover(function(){
            $j(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
       })
         .mouseout(function(){
        $j(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
            $j(this).css({backgroundPosition: "0 0"})
        }})
       })

  });
 </script>

对于Fancy Box：

<script type="text/javascript" src="lib/jquery-1.9.0.min.js"></script>

<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.4" media="screen" />
<script type="text/javascript">
    $(document).ready(function() {
        /*
         *  Simple image gallery. Uses default settings
         */

        $('.fancybox').fancybox();          

        $("#fancybox-manual-b").click(function() {
            $.fancybox.open({
                href : 'test.html',
                type : 'iframe',
                padding : 5
            });
        });


    });
</script>

在上述三个脚本中，nav.php中添加了1.4.2和1.9.0，index.php页面中添加了1.2.6。 nav.php添加了index.php include("nav.php")

Answer 1

你试过这样的尝试吗？

<script  src="../jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
var first= $.noConflict(true);
</script>

<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="../jquery-1.2.2.js"></script>
<script type="text/javascript">
var second= $.noConflict(true);
</script>

Answer 2

我更新了我的泡泡效果代码如下，现在一切正常......

感谢您的支持。

更新的代码是：

<script type="text/javascript">
    $.noConflict();
    jQuery( document ).ready(function( $ ) {
        $(function() {
            $('#nav > div').hover(
            function () {
                var $this = $(this);
                $this.find('img').stop().animate({
                    'width'     :'210px',
                    'height'    :'210px',
                    'top'       :'-25px',
                    'left'      :'-25px',
                    'opacity'   :'1.0'
                },500,'easeOutBack',function(){
                    $(this).parent().find('ul').fadeIn(700);
                });

                $this.find('a:first,h2').addClass('active');
            },
            function () {
                var $this = $(this);
                $this.find('ul').fadeOut(500);
                $this.find('img').stop().animate({
                    'width'     :'52px',
                    'height'    :'52px',
                    'top'       :'0px',
                    'left'      :'0px',
                    'opacity'   :'0.1'
                },5000,'easeOutBack');

                $this.find('a:first,h2').removeClass('active');
            }
        );
        });
        });
    </script>

使用此代码后，气泡效果，导航效果和Fancybox打开工作。

Answer 3

请在提问之前搜索，Google搜索多个jquery库＆＃39;给出了许多有用的结果。

无论如何，你可以为你的页面添加额外的代码，这样jQuery库就不会相互冲突：

<script>
var jq142 = jQuery.noConflict();
</script>

我认为必须在加载第一个jQuery库之前放置此代码。我建议你不要在一个页面上使用两个jQuery库，但如果你必须回答上述答案可能对你有帮助。

如何一次使用多个jquery？

3 个答案: