有人可以解释这个jQuery代码吗？ [英] Can someone Explain this jQuery code?

问题描述

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

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

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

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

提前致谢

推荐答案

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

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启动rotateAnimation（85）并且mouseout设置相同的函数-35。我猜它会反转它所看到的图像的旋转。

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

希望有所帮助。

这篇关于有人可以解释这个jQuery代码吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！