Can someone Explain this jQuery code?

Question

This code is taken from http://wilq32.googlepages.com/wilq32.rollimage222, and is supposed to animate an image rotation.

I can't figure out the structure exactly, and how to train it to do what I want, for example - make div X rotate div Y on hover (instead of rotating itself), or adding other functions such as fade to the animation.

$(document).ready(function()
  {
   var rot=$('#image3').rotate({maxAngle:25,minAngle:-55,
    bind:
     [
     {"mouseover":function(){rot[0].rotateAnimation(85);}},
     {"mouseout":function(){rot[0].rotateAnimation(-35);}}
     ]
   });
  });

Thanks in advance

Answer 1

The bind parameter according to the docs is specific to the rotateimage object. Instead I think you just want to use the rotate function when your event fires off.

$(document).ready(function()
{
     $('#divY').mouseover( $('#divX').rotate({angle:35}) );
     $('#divY').mouseout( $('#divX').rotate({angle:-85}) ); 
});

Answer 2

Here's what it does. 1) Waits for page load $(document).ready() 2) Assigns "rot" to equal a jQuery.rotate object. 3) This object is then bound to two different events, mouseover, and mouseout. Binding means that when those events trigger that piece of code will execute.

Mouseover starts "rotateAnimation(85)" and mouseout sets the same function -35. I'm guessing that it reverses the rotation of the image it's looking at.

To add things to the rotation, you could just do this.

$(document).ready(function()
    {
            var rot=$('#image3').rotate({maxAngle:25,minAngle:-55,
            bind:
                    [
                            {"mouseover":function(){
                                 rot[0].rotateAnimation(85);}
                                 //insert awesome fades and effects here.
                            },
                            {"mouseout":function(){
                                 rot[0].rotateAnimation(-35);}
                                 // insert more cool fades and effects here.
                            }
                    ]
            });
    });

Hope that helps.

Answer 3

var rot holds a reference to '#image3'. Then rotation is given limits of 55 degrees counter clockwise and 25 degrees clockwise. No user visible action has taken place at this point. #image3 is enabled to receive rotateAnimation commands.

Then the bind section takes the content of the array which holds two objects to bind. The first binds the mouseover of #image3 such that it will trigger a call to rotate rot[0], which is itself, 85 degrees clockwise. This does not travel 85 degrees, but is limited by the previous setting to only travel to 25 degrees.

The second does a similar thing with binding mouseout so that it will travel to 35 degrees counter clockwise and this travel is not limited by the minAngle.