Scriptaculous onmouseover event fire delay

Posted on 2007-07-30
Last Modified: 2008-01-09
I am using scriptaculous to cause images in a menu to grow then shrink again.  There are several images arranged in a vertical column.  I use the following functions, which are called for the events onmouseover and onmouseout:

function popIn(item) {
      new Effect.Scale(item, 64, {scaleFromCenter:true, duration: .1, queue:'end'});
function popOut(item) {
      new Effect.Scale(item, 150, {scaleFromCenter:true, duration: .1, queue:'end'});

When a user starts at the top and moves towards the bottom every image pops out and then in before the image we are looking for...  I want to make it so that prior to actually popping out that the user is required to keep their mouse hovering over the image for a specified amount of time.

The image's code looks like this:

<img src=th_img_74.jpg'  onmouseover = "popOut(this);" onmouseout="popIn(this);" />

The actual url is  Any ideas?  Does this make sense?
Question by:jon23d
    LVL 75

    Accepted Solution

    Perhaps (not tested)

    popOutTId = "";
    popInTId = "";
    item = null;
    function popIn() {
          if (item) new Effect.Scale(item, 64, {scaleFromCenter:true, duration: .1, queue:'end'});
    function popOut() {
          if (item) new Effect.Scale(item, 150, {scaleFromCenter:true, duration: .1, queue:'end'});
    function doPopOut(theItem) {
      item = theItem;
      popOutTId = setTimeout('popOut()',500)
    function doPopIn(theItem) {
      item = theItem;
      popInTId = setTimeout('popIn()',500)

    <img src=th_img_74.jpg'  
    onmouseover = "doPopOut(this);" onmouseout="doPopIn(this);" />
    LVL 1

    Expert Comment

    Forced accept.

    EE Admin

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    Join & Write a Comment

    Using Quotation Marks in PHP This question ( seems to come up a lot for developers who are new to PHP.  And it got me thinking, "How can we explain the rule…
    This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
    Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
    Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now