How can I make an animated mouse move across the screen and click a button?

It would be good for demonstration purposes!

Ideally, it would be in javascript and/or jQuery.

EDIT: there is a gigantic javascript file that the page calls, and that would take me a long time to parse and understand. That is why i am asking

How can I make an animated mouse move across the screen and click a button?

It would be good for demonstration purposes!

Ideally, it would be in javascript and/or jQuery.

EDIT: there is a gigantic javascript file that the page calls, and that would take me a long time to parse and understand. That is why i am asking

• javascript
• jquery
• user-interface

• 12 why not just "View Source" (or "View Page Source", etc, depending on your browser) on the site you're curious about? – Alex Martelli Commented Aug 3, 2009 at 3:12

4 Answers 4

 function googleItForThem() {
    if ($.getQueryString({ id: "fwd" })) redirect();

    $("body").css("cursor", "wait");
    fakeMouse.show();
    instruct("play.step_1");

    fakeMouse.animate({
      top:  (inputField.position().top  + 15).px(),
      left: (inputField.position().left + 10).px()
    }, 1500, 'swing', function(){
      inputField.focus();
      fakeMouse.animate({ top: "+=18px", left: "+=10px" }, 'fast', function() { fixSafariRenderGlitch(); });
      type(searchString, 0);
    });

    function type(string, index){
      var val = string.substr(0, index + 1);
      inputField.attr('value', val);
      if (index < string.length) {
        setTimeout(function(){ type(string, index + 1); }, Math.random() * 240);
      }
      else {
        doneTyping();
      }
    }

As it happens, lmgtfy does, in fact, implement this with JavaScript and jQuery. Why not read its source?

Try moving a 24x24 image around the screen - and then use a (you guessed it) 24x24 GIF image of a mouse cursor.

As the image arrives at its destination, call the click handler of the button. All this can be done very easily with jQuery and jQuery UI.

Looking at the source, they just use jQuery animate to move an <img> element around.