Home : Forums : Authoring and Programming : Super-Easy Animated Effects with jQuery

Super-Easy Animated Effects with jQuery

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register
03-Aug-10 00:00
DeleteDelete EditEdit
Elated Elated's avatar Rank: gold
Gold
Posts: 280
From: Brighton, UK
This is a forum topic for discussing the article "Super-Easy Animated Effects with jQuery":

http://www.elated.com/articles/super-easy-animated-effects-with-jquery/

Learn how to create smooth animated effects easily using jQuery and a few lines of code. Full examples included.
26-Aug-10 16:19
DeleteDelete EditEdit
evanmakesthings evanmakesthings's avatar Rank: none
No stars yet
Posts: 2
I made a fairly simple calendar slider using the animate effect discussed which works great in firefox, but won't work in any of the other browsers. Does anyone know what could be causing this?

Heres the code:



$( init );

function init(){
  $('#lastweek').hide();
  $('#nextweek').click(function(){
  	var lvalue = parseInt($('#weekholder').css('left'));
  	if(lvalue > '-818'){
	  $('#weekholder').animate({ left : "-=273" }, 2000 );
	  $('#lastweek').show();
	}
	else{
		$('#nextweek').hide();
	}  
	  
  });
  
  $('#lastweek').click(function(){
  	var lvalue = parseInt($('#weekholder').css('left'));
  	if(lvalue < '0'){
	  $('#weekholder').animate({ left : "+=273"}, 2000 );
	  $('#nextweek').show();
	}
	else{
		$('#lastweek').hide();
	}  
	  
  });
  
}
26-Aug-10 21:14
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3118
From: Southern Highlands, NSW, Australia
Hi evanmakesthings,

It's hard to tell what the problem might be without seeing your whole page, with the HTML and CSS - e.g. what's the value of "$('#weekholder').css('left')"?.

Can you post the URL of the page please?

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
26-Aug-10 22:11
DeleteDelete EditEdit
evanmakesthings evanmakesthings's avatar Rank: none
No stars yet
Posts: 2
It took me another day of playing with it before I realized this, but I have not defined the left value in the css. Firefox assumes zero, the rest just break.

Thank you
Lesson learned:

Define any value you want to animate.

[Edited by evanmakesthings on 28-Aug-10 10:07]
29-Aug-10 18:11
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3118
From: Southern Highlands, NSW, Australia
Interesting! Glad you got it working.
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
01-Sep-10 00:59
DeleteDelete EditEdit
youlin youlin's avatar Rank: none
No stars yet
Posts: 1
Sometimes it's not smooth when I use jQuery animation, especially when the left and top value are changing simultaneously, like this: 


$("#div").animate({"left": "+=100px", "top": "+=100px"}, 800);


It's just sometimes, but kinda annoying. Does Anyone know how to improve it?
02-Sep-10 02:05
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3118
From: Southern Highlands, NSW, Australia
Hi youlin,

It might simply be that your browser or computer can't handle that particular animation smoothly. Are you moving quite a large element/image? Do you have a relatively new computer? Is it jerky on other computers too? What about other browsers?

You might also like to try Spritely - unlike animate() it gives you control over the fps (frames per second) of an animation, which might help you tweak it to run more smoothly:

http://www.spritely.net/

HTH,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
 
New posts
Old posts

Follow Elated