有人可以解释一下这段 jQuery 代码吗？

Question

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

我无法准确地弄清楚结构，以及如何训练它来做我想要的事情，例如 - 让 div X 在悬停时旋转 div Y （而不是旋转本身），或者添加其他功能，例如淡入淡出到动画。

$(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。绑定意味着当这些事件触发时将执行该代码段。

鼠标悬停启动“rotateAnimation(85)”，鼠标悬停设置相同的功能-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

根据文档的绑定参数特定于rotateimage 对象。相反，我认为您只想在事件触发时使用旋转功能。

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

Answer 3

var rot 保存对 '#image3' 的引用。然后旋转限制为逆时针 55 度和顺时针 25 度。此时尚未发生任何用户可见的操作。 #image3 能够接收旋转动画命令。

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

第二个通过绑定mouseout 执行类似的操作，以便它将逆时针移动到 35 度，并且此移动不受 minAngle 限制。