Может кто-нибудь объяснить этот код jQuery?

Question

Этот код взят из http://wilq32.googlepages.com/wilq32.rollimage222, и должен анимировать поворот изображения.

Я не могу точно понять структуру и то, как научить ее делать то, что я хочу, например - заставить div X вращать div Y при наведении курсора (вместо того, чтобы вращаться сам) или добавлять другие функции, такие как fade, анимация.

$(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) Этот объект затем связывается с двумя различными событиями: наведением мыши и наведением мыши. Привязка означает, что когда эти события инициируют, будет выполняться этот фрагмент кода.

При наведении курсора запускается «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 включен для приема команд rotateAnimation.

Затем секция связывания берет содержимое массива, который содержит два объекта для связывания. Первый связывает mouseover из # image3 так, что вызовет поворот на rot[0], что само по себе на 85 градусов по часовой стрелке. Он не перемещается на 85 градусов, но ограничен предыдущей настройкой, чтобы он перемещался только до 25 градусов.

Второй делает то же самое с привязкой mouseout, так что он перемещается на 35 градусов против часовой стрелки, и это перемещение не ограничивается minAngle.