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.
- <script type="text/javascript">
- $("document").ready(function(){
- $("#navigation").superfish({
- delay : 400,
- animation : {opacity:"show",height:"show"},
- speed : "fast",
- pathClass : "activeLink"
- });
- });
- </script>
And my other script is:
- <script type="text/javascript">
- $(document).ready(function () {
-
- // find the elements to be eased and hook the hover event
- $('div.jimgResMenu ul li a').hover(function() {
-
- // if the element is currently being animated (to a easeOut)...
- if ($(this).is(':animated')) {
- $(this).stop().animate({width: "450px"}, {duration: 450, easing:"easeOutQuad"});
- } else {
- // ease in quickly
- $(this).stop().animate({width: "450px"}, {duration: 400, easing:"easeOutQuad"});
- }
- }, function () {
- // on hovering out, ease the element out
- if ($(this).is(':animated')) {
- $(this).stop().animate({width: "76px"}, {duration: 400, easing:"easeInOutQuad"})
- } else {
- // ease out slowly
- $(this).stop('animated:').animate({width: "76px"}, {duration: 450, easing:"easeInOutQuad"});
- }
- });
- });
- </script>
Any pointers? Thanks a million in advance...