我有这样的问题,我使用的脚本很少,如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对话框脚本时(到此代码的末尾),它根本不起作用。
任何想法为什么?
答案 0 :(得分: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>