Question

我正致力于在线创建一个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;
            }
        }
    );
}

高级jQuery .animation问题 - 从错误的方面动画

0 个答案: