Conflict between jQuery animations

JavaScript
1

I’m fairly new to jQuery, so it’s possible I’m missing something that more experienced users will consider obvious, but here goes anyway. I have an animated main menu that uses slideDown() to show the sub-menus, triggered by the .hover() event on the parent. There’s another animation on the home page that uses jCarousel to rotate the items in a <ul> every three seconds. Whenever a hover event on a parent menu item coincides with the animation trying to load a new frame, the menu freezes until the other animation is loaded. As common as animated menus are these days, I can’t believe I’m the only one who has ever come up against this problem.

What I want is for the menu animation to take precedence no matter what, but I understand that JS has no “priority” feature (not being multi-threaded) - so what’s the solution here?

2

Thanks for your responses, guys, and sorry it’s taken me so long to get back to this thread (busy day yesterday.)

@JimmyP - It would be pretty hard to create a test page with all the factors that are in play here, but you did clarify one important point - since animations execute at intervals anyway, there’s no reason that separate instances couldn’t execute simultaneously (from the user’s perspective, anyway.)

@kriscahya - I’m afraid you completely lost me. Is noConflict() a built-in method of jQuery? If so, how does it work? You seem to be using jQuery() and $() as though they were separate functions, but my understanding is that they are aliases of one another. Then again, I may have missed your whole point altogether.

As it turns out, I believe I’ve fixed my current problem by switching to jCarousel Lite, which, although it’s missing a feature that I’m going to have to hack, seems to “play nice” with my other animations. It wouldn’t surprise me, though, if I run into this problem again in the future, so I’m still interested in any thoughts anyone might have on the subject.

3

Animations do not occur synchronously (insofar as they occur at intervals) so there may be some other factor blocking the UI…

If you could create a demo page just with the conflicting code it would definitely help to narrow down the issue.

4

Hi,
I’m also not an expert in javascript, how about using this jquery no conflict

<html>
  <head>
  <script src="prototype.js"></script>
  <script src="jquery.js"></script>
  <script>
    jQuery.noConflict();
    // Use jQuery via jQuery(...)
    jQuery(document).ready(function(){
        jQuery("div").hide();
    });
    // Use Prototype with $(...), etc.
    $('someid').hide();
  </script>
  </head>
  <body></body>
</html>

cheers