Link to home
Start Free TrialLog in
Avatar of aznprncritic
aznprncritic

asked on

Problem with Scriptaculous effect

I'm using the following script to animate some rollovers:

Effect.divSwap = function(element,container){
    var div = document.getElementById(container);
    var nodeList = div.childNodes;
    var queue = Effect.Queues.get('menuScope');

    if(queue.toArray().length<1){
        if(Element.visible(element)==false){
            for(i=0;i<nodeList.length;i++){
                if(nodeList.item(i).nodeName=="DIV" && nodeList.item(i).id!=element){
                    if(Element.visible(nodeList.item(i))==true){
                        Effect.Fade(nodeList.item(i),{queue:{position:'front',scope:'menuScope',limit:1}})
                    }
                }
            }
            Effect.Appear(element,{queue:{position:'end',scope:'menuScope',limit:2}})
       }
   }
}

Here's the HTML i'm using:

<div id="localNavContainer">
    <ul id="localNav">
      <li id="simplicity"><a href="choose-simplicity.php" onmouseover="Effect.divSwap('simplicity-hero','centerCol');" title="Simplicity"></a></li>
      <li id="style"><a class="selected" href="choose-style.php" onmouseover="Effect.divSwap('style-hero','centerCol');" title="Style"></a></li>
      <li id="performance"><a href="choose-performance.php" onmouseover="Effect.divSwap('performance-hero','centerCol');" title="Performance"></a></li>
    </ul>
    <div><img src="img/bg/largedivider.jpg" width="881" height="35" alt="" /></div>
  </div>

The problem I'm having is that in IE, when I rollover the items, the effect will only fire *most of the time* but not everytime.  Am I missing something here?
ASKER CERTIFIED SOLUTION
Avatar of system_down
system_down
Flag of Switzerland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial