Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Advanced jQuery .animation problem -- animates from wrong side

    I'm working on creating a jQuery book online that utilizes .animate to create nifty effects. I'm nearly finished with the initial animation and design, but have run across a pretty irritating snag.

    Have a look at http://notebook.dauidusdesign.com to see the problem.

    The trouble:
    When you click on the right arrow or hover to see the next page, all works exactly right. But, when you hover on the left arrow, the animation occurs on the wrong side of the page... it should occur on the left side and show the page behind it. I'm pretty sure it comes down to something in the code below, as that is where the majority of hover animations occur.

    For a look at the rest of the code, visit the site above, view the source and check out the file jquery.booklet.1.1.0.js. The code below begins at line 401.


    Thanks for the help!



    Code:
    	//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;
    				}
    			}
    		);
    	}
    Last edited by VIPStephan; 07-29-2011 at 09:59 AM. Reason: code formatting


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •