2 scripts on the same page breaks
i have a custom jquery for my site aswell as an lightbox query. But it seems i cannot get both to work the the same time. Its always 1 of them working, depending on the order they come in. heres the code
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.lightbox-0.5.js"></script>
<link rel="stylesh开发者_C百科eet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function () {
$('a[@rel*=lightbox]').lightBox({
maxHeight: screen.height * 0.6,
maxWidth: screen.width * 0.6
});
});
</script>
<script type="text/javascript" src="./Scripts/jquery-1.3.2.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
/* Menu */
$("#menu li:last").css("margin-right", "0");
$("#menu ul.sub li:last").css("margin-right", "0");
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
});
$("#menu").hover(function() { }, function() {
$(".sub").fadeOut(200);
});
});
</script>
You have included the jQuery twice ..
Remove this line of code
<script type="text/javascript" src="./Scripts/jquery-1.3.2.js" ></script>
Your line:
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
});
Uses the single parameter call for hover()
http://api.jquery.com/hover/#hover2
This was added in jQuery 1.4, and you are using 1.3.2.
Either:
Update your jQuery.
Or use the two parameter function:
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
}, null);
That way the anonymous function will be called only on mouseenter, change the order of the params if you want it called on mouseleave.
If you want it to fade in/out:
$("#menu li#menues a").hover(
function() {
$(this).siblings(".sub").fadeIn(200);
},
function() {
$(this).siblings(".sub").fadeOut(200);
});
If you need to use the same function for both, while using jQuery 1.3.2 use:
function menuLinkHover(){
$(this).siblings(".sub").fadeIn(200);
}
$("#menu li#menues a").hover(menuLinkHover, menuLinkHover);
Enjoy!
Some scripts extend the jQuery object, it appears Lightbox is one of them.
By including a reference to the jQuery script twice, as the page loads:
- the jQuery object will be added to the DOM,
- then extended for lightbox,
- then a new jQuery object will be added to the DOM without the extensions
so the script that depends on lightbox will not run.
Removing the second jQuery script
tag should fix this.
精彩评论