Hi David, thank you for your response and what you explained is exactly what I'm trying to do. I have tried your code sample, but I get an error from the Firebug console: effectInExecution.cancel is not a function. Here is the code that I have used: http://pastie.org/775288. It seems that effectInExecution=$('peekaboo').blindUp({ duration: 0.3 }); does not reference the Scriptaculous Effect object, which is what is needed to call the cancel() method. However, I don't know how to reference the Effect object using the effectInExecution variable. I've tried: if(effectInExecution) effectInExecution*.effect*.cancel(); but it returns an 'undefined', not the Effect object. Thanks for your time and I hope I can find a solution to this problem.
On Tue, Jan 12, 2010 at 10:01 AM, david <[email protected]> wrote: > hi kimbaudi, > > This is a common mistake with animation. Let me explain. > When you mouseover element, you'll start animation. If you mouseout, > after animation is finished, no problem, mouseout animation will be > executed. > But now if you repeatedlly move mouse over/out/over/out, if you did > not manage global animations, you'll have 2 blinddown and 2 blindup > executing concurrently. > In your code exemple, you'll set the queue parameter so each animation > is stack and play one after the other ... but this is not what you > want ?? > And to lmimit execution code, you set the limit parameter, which > prevent having more tahn 1 animation in the queue. But that's not like > that it should be handle. > > What you should do is: > > <script type="text/javascript"> > document.observe("dom:loaded", function() { > var effectInExecution=null; > $('observearea').observe('mouseover', function() { > if(effectInExecution) effectInExecution.cancel(); > effectInExecution=$('peekaboo').blindDown({ duration: > 0.3 }); > } > $('observearea').observe('mouseout', function() { > if(effectInExecution) effectInExecution.cancel(); > effectInExecution=$('peekaboo').blindUp({ duration: 0.3 }); > } > }); > </script> > > In fact, you just save the scriptaculous object and cancel it if > another animation should execute. > Is that what your trying to do ?? > > -- > david > > > On 9 jan, 23:05, kimbaudi <[email protected]> wrote: > > Hi, I have a hidden block element absolutely positioned to the bottom > > right of my webpage. I am trying to display this block element when I > > mouseover that area and hide this block element when I mouseout from > > that area using Effects.BlindUp and Effects.BlindDown. At first > > glance, my webpage seems to work okay. However, if I repeatedly > > mouseover/mouseout of the area quickly, the block element becomes > > visible once I mouseout of that area even though the block element > > should be hidden. Can anybody tell me what is wrong with my code? Can > > anybody point me to a website or share some example code that would > > achieve the results that I am trying to pull? Thanks. I would have > > provided the sample code on pastie.org, but the site is down. Here is > > my sample code: > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > > <html xmlns="http://www.w3.org/1999/xhtml";> > > <head> > > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> > > <title>Blind Test</title> > > <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ > > libs/prototype/1.6.1.0/prototype.js"></script> > > <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ > > libs/scriptaculous/1.8.3/scriptaculous.js"></script> > > <script type="text/javascript"> > > document.observe("dom:loaded", function() { > > $('observearea').observe('mouseover', function() { > > if ($('peekaboo').visible()) { > > $('peekaboo').blindUp({ duration: 0.3, queue: { > position: 'end', > > scope: 'modalbtnscope', limit: 1 } }); > > } > > else { > > $('peekaboo').blindDown({ duration: 0.3, queue: { > position: 'end', > > scope: 'modalbtnscope', limit: 1 } }); > > } > > }); > > $('observearea').observe('mouseout', function() { > > if ($('peekaboo').visible()) { > > $('peekaboo').blindUp({ duration: 0.3, queue: { > position: 'end', > > scope: 'modalbtnscope', limit: 1 } }); > > } > > else { > > $('peekaboo').blindDown({ duration: 0.3, queue: { > position: 'end', > > scope: 'modalbtnscope', limit: 1 } }); > > } > > });}); > > > > </script> > > <style type="text/css"> > > body {margin:0; padding:0;} > > #peekaboo { > > position:absolute; > > bottom:0px; > > right:10px; > > z-index:9999; > > width:100px; > > height:20px; > > background:pink; > > text-align:center;} > > > > #observearea { > > position:absolute; > > bottom:0px; > > right:10px; > > z-index:9999; > > width:100px; > > height:20px;} > > > > </style> > > </head> > > <body> > > <div id="peekaboo" style="display:none;"><div>Peek-A-Boo</div></div> > > <div id="observearea"></div> > > </body> > > </html> > > -- > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To post to this group, send email to > [email protected]. > To unsubscribe from this group, send email to > [email protected]<prototype-scriptaculous%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > > > >--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to [email protected].
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
