如何一次使用多个jquery?

时间:2022-03-01 16:33:37

I need to use three different scripts >> jquery-1.2.6.min.js , jquery-1.4.2.min.js and jquery-1.9.0.min.js

我需要使用三个不同的脚本>> jquery-1.2.6.min.js,jquery-1.4.2.min.js和jquery-1.9.0.min.js

First one is needed for Navigation menu bar, second one is for bubble effect on home page and third one is for opening fancy box.

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

But after using first, rest two are not working. In rest two i have used no-conflict and it worked. But when used first one, nothing is working...Only Bubble effect (that is first one - 1.4.2.min.js ) is working.

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

All codes are as follows:

所有代码如下:

For Bubble Effect:

泡泡效果:

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

For Navigation Menu Effect:

对于导航菜单效果:

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

For Fancy Box:

对于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>

Out of above three scripts, 1.4.2 and 1.9.0 are added in nav.php and 1.2.6 is added in index.php page. nav.php is added in index.php with include("nav.php")

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

3 个解决方案

#1


1  

I updated my code for bubble effect as follows and now everything is working.....

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

Thank you for your support.

感谢您的支持。

Updated code is :

更新的代码是:

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

After using this code, bubble effect, navigation effect and Fancybox Opening is Working.

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

#2


1  

Have you tried like this?

你试过这样的吗?

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

#3


-1  

Please search before asking a question, a Google search for 'multiple jquery libraries' gives many useful results.

请在询问问题之前进行搜索,Google搜索“多个jquery库”会提供许多有用的结果。

Anyway, you can add an extra code to your pages(s) so the jQuery libraries don't conflict with each other:

无论如何,您可以在页面中添加额外的代码,以便jQuery库不会相互冲突:

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

I believe this code must be placed before the first jQuery library is loaded. I advise you not to use two jQuery libraries on one page but if you must to the above answer may help you.

我相信这个代码必须放在第一个jQuery库加载之前。我建议你不要在一个页面上使用两个jQuery库,但如果你必须上面的答案可能对你有帮助。

#1


1  

I updated my code for bubble effect as follows and now everything is working.....

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

Thank you for your support.

感谢您的支持。

Updated code is :

更新的代码是:

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

After using this code, bubble effect, navigation effect and Fancybox Opening is Working.

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

#2


1  

Have you tried like this?

你试过这样的吗?

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

#3


-1  

Please search before asking a question, a Google search for 'multiple jquery libraries' gives many useful results.

请在询问问题之前进行搜索,Google搜索“多个jquery库”会提供许多有用的结果。

Anyway, you can add an extra code to your pages(s) so the jQuery libraries don't conflict with each other:

无论如何,您可以在页面中添加额外的代码,以便jQuery库不会相互冲突:

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

I believe this code must be placed before the first jQuery library is loaded. I advise you not to use two jQuery libraries on one page but if you must to the above answer may help you.

我相信这个代码必须放在第一个jQuery库加载之前。我建议你不要在一个页面上使用两个jQuery库,但如果你必须上面的答案可能对你有帮助。