Продвинутая проблема jQuery .animation - анимирует не с той стороны - PullRequest
Новая
       3

Продвинутая проблема jQuery .animation - анимирует не с той стороны

1 голос
/ 30 июля 2011

Я работаю над созданием онлайн-книги jQuery, в которой для создания изящных эффектов используется .animate. Я почти закончил с начальной анимацией и дизайном, но натолкнулся на довольно раздражающее препятствие.

Посмотрите на http://notebook.dauidusdesign.com, чтобы увидеть проблему.

Беда: Когда вы нажимаете на стрелку вправо или наведите курсор на следующую страницу, все работает точно так же. Но когда вы наводите курсор на левую стрелку, анимация происходит не на той стороне страницы ... она должна появляться на левой стороне и показывать страницу позади нее. Я почти уверен, что все сводится к следующему коду, потому что именно здесь происходит большинство анимаций при наведении.

Чтобы посмотреть остальную часть кода, посетите вышеуказанный сайт, просмотрите исходный код и проверьте файл jquery.booklet.1.1.0.js. Код ниже начинается со строки 401.

Спасибо за помощь! 

//add page hover animations
if(opts.hovers){
    ctrlsN.hover(
        function(){
            if(!busy && opts.curr+2 <= opts.pTotal-2){
                //animate
  p2.stop().animate({right:5, 'width':opts.pWidth-140, 'height':opts.pHeight}, 800, opts.easing);
  p2wrap.stop().animate({left:"-5px"}, 800, opts.easing);
  p3.stop().animate({'left':opts.width-180, 'width':30, paddingLeft: 50}, 800, opts.easing);
  p3wrap.stop().animate({left:10}, 800, opts.easing);
  rhover = true;
            }
        },
        function(){
            if(!busy && opts.curr+2 <= opts.pTotal-2){
  p2.stop().animate({right:0, 'width':opts.pWidth, 'height':opts.pHeight}, 800, opts.easing);
  p2wrap.stop().animate({left:0}, 800, opts.easing);
  p3.stop().animate({'left':opts.width, 'width':0, paddingLeft: 0}, 800, opts.easing);
  p3wrap.stop().animate({left:0}, 800, opts.easing);                
  rhover = false;
            }
        }
    );
    ctrlsP.hover(
        function(){
            if(!busy && opts.curr-2 >= 0){
                //animate
  p1.stop().animate({left:5, 'width':opts.pWidth-140}, 800, opts.easing);
  p1wrap.stop().animate({right:"-5px", 'right':opts.pWidthH-140}, 800, opts.easing);
  p0.stop().animate({'right':opts.width-180, left:100, 'width':80}, 800, opts.easing);
  p0wrap.stop().animate({right:10}, 800, opts.easing);
  lhover = true;
            }
        },
        function(){
            if(!busy && opts.curr-2 >= 0){
  p1.stop().animate({left:0, 'width':opts.pWidth}, 800, opts.easing);
  p1wrap.stop().animate({right:0, 'right':opts.pWidthH}, 800, opts.easing);
  p0.stop().animate({'right':opts.width-0, left:0, 'width':0}, 800, opts.easing);
  p0wrap.stop().animate({right:0}, 800, opts.easing);
  lhover = false;
            }
        }
    );
}
...