Hi Paul, sorry, I made a mistake, in your case, it return the Element and not a scriptaculous Effect Object.
I take your code and modify it :(( Why, Because I think it's more flexible to use the Morph Effect instead of those packaged Effect (it's my personnal opinion). So go to pastie, and see the change I made: http://pastie.org/776764 If some explaination is needed, just write it back on this thread, I will try to follow it. My first reason is when moving in and out the mouse quickly on the element will lost the real height of thge element and Effects where lost ... So, quickly, I use the Morph Effect and animate the Height property of the peekaboo to 50px and set it back to 0px for the ""blindDown"". -- david On 12 jan, 20:31, Paul Kim <[email protected]> wrote: > 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.
