Jemand

<ul class="menu" id="mymenu">
 <li><div class="link"> menupoint one</div>
  <ul>
   <li><div class="link">yeah</div></li>
   <li><div class="link">some link</div></li>
  </ul>
 </li>
</ul>


explanation:

first, because all of the divs an li`s down have any id, they get one with identify().

all <li> tags are buttons. if there is a mouseover on the button, the nested div container (button.down('div')) is morphed to class 'highlight'. on mouseout, its morphed back to its original class name using the morphOut function. morphOut is the same as morph, but in the other direction. it does not animate addClassName, it animates removeClassName instead. (thank you tobie)

the problem:
effect queues! what i do, is adding an effect to the div container when mouseover occurs, the effect is queued into the 'button.down('div').id' scope. same for mouseout.
so far so good, now the only thing is that if the user is fast, many effects get queued. limit does not solve the problem, because sometimes a button keeps highlighted if the user is fast enough. i also tried to empty the queue everytime the mouseover event occurs, but with no luck. i already did that in another project and i worked very fine. i think the problem has something to do with bind(), wich i do not do at all. maybe its because the nesting. it some kind of FAQ question, but i already tried everything i know about that.

thanks for any help!





// give all div.link an anonymous_element ID
$$('ul.menu li div.link').each(function(af){af.id = af.identify();});

// watch all buttons for mouseover, if mouseover -> do effects on button.down('div')
$$('ul.menu li').each(function(button)
{
	if(button.down('div')) // check if div container has instance
	{
		button.down('div').observe('mouseover',function(mo)
		{
			if(!button.down('div').hasClassName('active')) 
			{		
				//console.log("mouseover: "+button.down('div').id);
				//var queue = Effect.Queues.get(button.down('div').id);
		 //	queue.each(function(e) { e.cancel(); });
				button.down('div').morph('highlight', 
				{
					duration: '0.2', 
					queue: {position: 'end', scope: button.down('div').id}
				});
			}
		});
	
		button.down('div').observe('mouseout',function(moo)
		{
		//	console.log("mouseout: "+button.down('div').id);
	//		var queue = Effect.Queues.get(button.down('div').id);
	//		queue.each(function(e) { e.cancel() });
			if(!button.down('div').hasClassName('active'))
			{								
				button.down('div').morphOut('highlight', 
				{
					duration: '0.2', 
					queue:{position: 'end', scope: button.down('div').id}
				});
			}
		});
	}