开发者

Can some please explain this jQuery code? [duplicate]

This question already has answers here: Closed 9 years ago.

Possible Duplicate:

Can someone Explain this jQuery code?

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:
                    [
                            {"mou开发者_Go百科seover":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!


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


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.


  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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜