This week's book giveaway is in the Reactive Progamming forum.
We're giving away four copies of Reactive Streams in Java: Concurrency with RxJava, Reactor, and Akka Streams and have Adam Davis on-line!
See this thread for details.
Win a copy of Reactive Streams in Java: Concurrency with RxJava, Reactor, and Akka Streams this week in the Reactive Progamming forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Junilu Lacar
  • Jeanne Boyarsky
  • Bear Bibeault
Sheriffs:
  • Knute Snortum
  • Tim Cooke
  • Devaka Cooray
Saloon Keepers:
  • Ron McLeod
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Ganesh Patekar

Animation and effects in JQuery

 
Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Does jQuery provide animation and effects support? Are there any extensions built on top of jQuery for the same?


Thanks
Sapna Grover
 
Author
Posts: 21
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Originally posted by Sapna Grover:
Does jQuery provide animation and effects support? Are there any extensions built on top of jQuery for the same?


Thanks
Sapna Grover



Yep! One of the four pillars of jQuery in Effects (they are DOM, Effects, Ajax, and Events).

jQuery proper comes with stuff like $("p").show(), $("p").show("slow"), $("p").fadeIn(), $("p").animate({left: "+=50px"}) and more.

jQuery Enchant, currently in the works and available via svn, adds $("p").animate({color: "#003333"}) and support for animating class modifications $("p").addClass("foo", "slow").

Cool, huh?
 
Marshal
Posts: 67289
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
As Yehuda pointed out, core jQuery has built-in effects to hide and show elements in various animated fashions. The hide() and show() methods can either instantaneously make items appear and disappear, or cause them to appear over a duration; fadeIn() and fadeOut(), along with fadeTo() animate the opacity of objects, and slideUp() and slideDown() cause the elements to appear and vanish using a window blind effect.

You can also use the general animate() method to animate just about any numeric CSS value in order to create your own custom animations. The Effects chapter in the book shows how, with just a few lines of code, you can create custom animations that cause an element to scale in size, appear to "drop off" the page, and one that makes elements disappear in a "puff".

Plugins add more animations, including "easing functions" that alter the pace of animations, and the ability to animate color values.
[ January 17, 2008: Message edited by: Bear Bibeault ]
 
Ranch Hand
Posts: 94
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I was just looking at some of the plug-ins and there are so many of them. This one is very cool jQZoom plug-in for jQuery.
 
Bear Bibeault
Marshal
Posts: 67289
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Originally posted by George Stoianov:
I was just looking at some of the plug-ins and there are so many of them.


LOL. While the treasure trove of plugins is one of jQuery's best strengths, it can be a little overwhelming at first, no?

That's not one I'd seen before. Very cool!
 
George Stoianov
Ranch Hand
Posts: 94
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I like the plug-ins that way you can pick and choose what you want like you said.

Does the book provide any examples on how to adapt an existing web site and add some new functionality or do you do a project from the grounds up and follow it through out. Do you have a chapter summary or a sample chapter on the net somewhere??

Thanks,
George
 
Bear Bibeault
Marshal
Posts: 67289
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Given the myriad coding styles and existing JavaScript libraries out there, it would be difficult to try and explain how to migrate existing pages.

That said, because jQuery plays so well with other libraries (by just staying out of the way) it's easy to start integrating jQuery into even the most complex page in a piece-meal manner if that's what makes the most sense. Because you can add jQuery to an existing page without fear of it breaking anything (be sure to unbind $ if that's being used by something else already), you can slowly convert a complex page over time if need be.

In the preface, I outline how I learned about jQuery and what ended up winning me over. A large part of that was that the process of converting over existing web apps -- some rather complex -- to jQuery was such a breeze and that the end result was always much simpler and smaller than the original, and sometimes with enhanced functionality that I added along the way because it was just so easy.

Doing more with less is what converted me.
 
Bear Bibeault
Marshal
Posts: 67289
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Originally posted by George Stoianov:
I like the plug-ins that way you can pick and choose what you want like you said.

The jQuery team was wise to realize that trying to put everything into the core library would result in a bloated mess, and designed jQuery for extensibility.

Do you have a chapter summary or a sample chapter on the net somewhere??


The TOC and the first chapter are available at http://www.manning.com/bibeault.
[ January 18, 2008: Message edited by: Bear Bibeault ]
 
The only taste of success some people get is to take a bite out of you. Or this tiny ad:
Java file APIs (DOC, XLS, PDF, and many more)
https://products.aspose.com/total/java
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!