Using document ready twice causing conflicts...

Using document ready twice causing conflicts...

Hi there. To start, I'm a newb at jQuery. In fact, newb might be pushing it, cause really, I'm just trying to add a jQuery script to our existing site which already has a jQuery script. When I add the second jQuery script, both lose functionality. I have looked at several sites outlining how to make them play together, but I just can't figure it out. Could someone look at what I'm trying to merge and point me in the correct direction? My boss is breathing down my neck and I'm just a damn receptionist. LOL.

  1. <script type="text/javascript">
  2. $("document").ready(function(){
  3. $("#navigation").superfish({
  4. delay        : 400,
  5. animation    : {opacity:"show",height:"show"},
  6. speed        : "fast",
  7. pathClass    : "activeLink"
  8. });
  9. });
  10. </script>
And my other script is:

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3.  
  4.   // find the elements to be eased and hook the hover event
  5.   $('div.jimgResMenu ul li a').hover(function() {
  6.     
  7.     // if the element is currently being animated (to a easeOut)...
  8.     if ($(this).is(':animated')) {
  9.       $(this).stop().animate({width: "450px"}, {duration: 450, easing:"easeOutQuad"});
  10.     } else {
  11.       // ease in quickly
  12.       $(this).stop().animate({width: "450px"}, {duration: 400, easing:"easeOutQuad"});
  13.     }
  14.   }, function () {
  15.     // on hovering out, ease the element out
  16.     if ($(this).is(':animated')) {
  17.       $(this).stop().animate({width: "76px"}, {duration: 400, easing:"easeInOutQuad"})
  18.     } else {
  19.       // ease out slowly
  20.       $(this).stop('animated:').animate({width: "76px"}, {duration: 450, easing:"easeInOutQuad"});
  21.     }
  22.   });
  23. });
  24. </script>
Any pointers? Thanks a million in advance...