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.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.


Reply via email to