有人可以解释这个jQuery代码吗？

此代码取自http://wilq32.googlepages.com/wilq32.rollimage222 ，并且应该为图像旋转设置动画。

我无法准确地找出结构，以及如何训练它来做我想要的事情，例如 – 使div X在hover时旋转div Y（而不是旋转自身），或者在动画中添加其他function，例如淡入淡出。

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

提前致谢

Answer 1

这是它的作用。 1）等待页面加载$（document）.ready（）2）将“rot”指定为等于jQuery.rotate对象。 3）然后将此对象绑定到两个不同的事件，mouseover和mouseout。 绑定意味着当这些事件触发该段代码时将执行。

Mouseover启动“rotateAnimation（85）”，mouseout设置相同的function-35。 我猜它反转了它所看到的图像的旋转。

要向旋转添加内容，您可以执行此操作。

 $(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. } ] }); }); 

希望有所帮助。

Answer 2

根据文档的bind参数特定于rotateimage对象。 相反，我认为你只想在事件发生时使用rotate函数。

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

Answer 3

var rot包含对'#image3'的引用。 然后旋转给出逆时针55度和顺时针25度的限制。 此时没有用户可见的操作。 ＃image3已启用以接收rotateAnimation命令。

然后绑定部分获取包含两个要绑定的对象的数组的内容。 第一个绑定＃image3的mouseover ，这样它将触发一个旋转rot[0]的调用，这本身就是顺时针85度。 这不会移动85度，但受先前设置的限制，仅限于25度。

第二个类似的东西与绑定mouseout以便逆时针行进35度，这个行程不受minAngle限制。