Can some please explain this jQuery code?

Question

I have posted this before, but I would like to refine my question (and I can't seem to do it in the old thread).

The code is:

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

It's taken from here: http://wilq32.googlepages.com/wilq32.rollimage222, and there's a demo of the functionality there as well (animating an image rotation - the 3rd demo on the page).

What I need explained:

1. I understand that there's a variable being declared -"rot", but I can't seem to understand where the declaration ends....

2. When the variable is used, it is used as rot[0], what does [0] stands for? is this an array?

3. I've never seen bind used like that, the original syntax is

   $("selector").bind( type, [data], fn );

What's going on, then? What are all the commas and [ ] about?

1. What I'd like to do, eventually, is use this script to rotate image "X", while "Y" element is being clicked. How can this be done (preferably without "bind")?

Thanks!

Answer 1

Declaration ends on 2nd to last semicolon. The reference is captured and will be used much later, during the execution of the callback functions passed.

rot is a jQuery object, which is not an array but can be indexed like one.

rot[0] is the first DOM object which matches the selector #image3, i.e. the object with ID image3.

bind, in this case, is not the function bind, but part of the options passed to rotate.

Square brackets [foo, bar] indicate a literal array of foo and bar. Curly braces { foo: "foo", bar: "bar"} are a literal object with properties foo and bar.

Answer 2

1. The declaration ends at the first semicolon. rot is assigned the value that rotate() returns (which, in this case, is the same as the result of $('#image3'), due to jQuery's method chaining syntax). Everything between rotate( and the next ) is just arguments passed to rotate().

2. Yes, [0] is array access. rot[0] refers to the first ("0th") item in the array rot.

3. Here, { maxAngle:25, minAngle:-55, bind: ... } is an "Object literal," i.e. syntax for an Object that has the properties maxAngle, minAngle, and bind. If you assigned this object to a variable myObject (instead of just passing it as an argument to rotate()), you could then access its properties like myObject.maxAngle, myObject.minAngle, and myObject.bind. In this case bind isn't a function, it's just the name of a property on the object.

Answer 3

I think the basic syntactic issues have been explained by others here quite well...

In terms of:

What I'd like to do, eventually, is use this script to rotate image "X", while "Y" element is being clicked. How can this be done (preferably without "bind")?

Try this:

var x=$("#imagex"); //<-- image to be rotated
var y=$("#elemy"); //<-- element to be clicked
var angleOfRotation=45; //<-- angle of rotation

y.bind("click",function(){
  x[0].rotateAnimation(angleOfRotation);
});

Answer 4

Ok, the missing piece - this is how you use the above code to trigger rotation by another element:

var itemYouWannaRotate = $("#imageToRotate").rotate(0);
$("#TriggerElement").click(function(){
 itemYouWannaRotate[0].rotateAnimation(90);
});

Thanks guys, all your answers were a big help.