SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast javadecaf's Avatar
    Join Date
    Apr 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Conflict between jQuery animations

    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. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast kriscahya's Avatar
    Join Date
    Jul 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I'm also not an expert in javascript, how about using this jquery no conflict

    Code:
    <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

  4. #4
    SitePoint Enthusiast javadecaf's Avatar
    Join Date
    Apr 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •