Scriptaculous onmouseover event fire delay

Posted on 2007-07-30
Medium Priority
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 http://www.sscautos.com/dev/photos.php.  Any ideas?  Does this make sense?
Question by:jon23d
LVL 75

Accepted Solution

Michel Plungjan earned 2000 total points
ID: 19598364
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);" />

Expert Comment

ID: 20210772
Forced accept.

EE Admin

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Measuring Server's processing rate with a simple powershell command. The differences in processing rate also was recorded in different use-cases, when a server in free and busy states.
This video teaches users how to migrate an existing Wordpress website to a new domain.
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…
Suggested Courses
Course of the Month13 days, 19 hours left to enroll

807 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