Why is this javascript breaking my other scripts?

JavaScript
1

I’m currently using the following code so that when I hover over my navigation images it fades then in when hovered over.

<script type="text/javascript">$(function() {$(".fade-in").css("opacity","0");$(".fade-in").hover(function () {$(this).stop().animate({opacity: 1.0}, "220");},function () {$(this).stop().animate({opacity: 0}, "2000");});});</script>

It works fine but when I have any other javascripts, such as a lightbox or image swapper, only one of them works. I want a lightbox script on the page so I need to figure out how to get both scripts working together. Note I’m not java developer, I just copied and pasted the code for my website so it’s entirely possible, and probable, that I’m making a fundamental error here.

Thanks for any help.

2

It seems to be based on exactly where I add the jquery code. For example if I use the following code then the lightbox works but not the fader.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="design/lightbox/prototype.js"></script>
<script type="text/javascript" src="design/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="design/lightbox/lightbox.js"></script>
<script type='text/javascript'>$(function() {$(".fade-in").css("opacity","0");$(".fade-in").hover(function () {$(this).stop().animate({opacity: 1.0}, "220");},function () {$(this).stop().animate({opacity: 0}, "2000");});});</script>

But if I use the following code then the lightbox doesn’t work but the fader does.

<script type="text/javascript" src="design/lightbox/prototype.js"></script>
<script type="text/javascript" src="design/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="design/lightbox/lightbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>$(function() {$(".fade-in").css("opacity","0");$(".fade-in").hover(function () {$(this).stop().animate({opacity: 1.0}, "220");},function () {$(this).stop().animate({opacity: 0}, "2000");});});</script>

Anybody know what’s happening here?