• 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 Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Animation and effects in JQuery

 
Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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?
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 ]
 
It runs on an internal combustion engine. This ad does not:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic