0

我有这样一个问题，我使用了一些脚本，如 jquery carousel 滑块、jquery 下拉菜单，但是当我尝试添加 jqueryui 对话框时，所有其他脚本都不起作用。这是我的代码：

在我添加 JqueryUi 对话框之前：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type='text/javascript' src='js/jquery.liquidcarousel.pack.js'></script>
<script>
    $(document).ready(function(){  
        //To switch directions up/down and left/right just place a "-" in front of the top/left attribute  

        //Caption Sliding (Partially Hidden to Visible)  
        $('.boxgrid.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});  
        });  
            $('.boxgrid2.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'240px'},{queue:false,duration:160});  
        });  
            $('.boxgrid3.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});  
        }); 


    });  
</script>
<script>
jQuery(document).ready(function($) {
    jQuery('#mega-menu-1').dcMegaMenu();

});
</script>

<script> 
    function show() { 
        if(document.getElementById('benefits').style.display=='none') { 
            document.getElementById('benefits').style.display='block'; 
        } 
        return false;
    } 
    function hide() { 
        if(document.getElementById('benefits').style.display=='block') { 
            document.getElementById('benefits').style.display='none'; 
        } 
        return false;
    }   
</script> 
<script type="text/javascript">
    <!--
        $(document).ready(function() {
            $('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false});
        });
    -->
</script>

带有 JqueryUi 对话框的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type='text/javascript' src='js/jquery.liquidcarousel.pack.js'></script>

<!--Dialog start-->
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "fade"

});
$( ".log-in" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<!--Dialog end-->


<script>
    $(document).ready(function(){  
        //To switch directions up/down and left/right just place a "-" in front of the top/left attribute  

        //Caption Sliding (Partially Hidden to Visible)  
        $('.boxgrid.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});  
        });  
            $('.boxgrid2.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'240px'},{queue:false,duration:160});  
        });  
            $('.boxgrid3.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});  
        }); 


    });  
</script>



<script>
jQuery(document).ready(function($) {
    jQuery('#mega-menu-1').dcMegaMenu();

});
</script>


<script> 
    function show() { 
        if(document.getElementById('benefits').style.display=='none') { 
            document.getElementById('benefits').style.display='block'; 
        } 
        return false;
    } 
    function hide() { 
        if(document.getElementById('benefits').style.display=='block') { 
            document.getElementById('benefits').style.display='none'; 
        } 
        return false;
    }   
</script> 
<script type="text/javascript">
    <!--
        $(document).ready(function() {
            $('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false});
        });
    -->
</script>

对我来说，另一件非常奇怪的事情是，当我在所有脚本之后添加 JqueryUi 对话框脚本时（到此代码的末尾）它根本不起作用。

任何想法为什么？

截屏

4

1 回答 1

1

我使用了 noConflict();

添加到脚本$jQ = jQuery.noConflict();然后更改所有$ -> $jQ 

<script>
$jQ = jQuery.noConflict();
$jQ .fx.speeds._default = 1000;
$jQ (function() {
$jQ ( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "fade"

});
$jQ ( ".log-in" ).click(function() {
$jQ ( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
于 2013-01-11T15:50:29.477 回答