How does the "let me google that for you" site make an animated mouse?

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 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();
      }
    }