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 <david.brill...@gmail.com> 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 <kimba...@gmail.com> 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
> prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com<prototype-scriptaculous%2bunsubscr...@googlegroups.com>
> .
> 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 prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to