Home Mathematics Chapter 3 Animation Effects with jQuery and CSS3
Chapter
Licensed
Unlicensed Requires Authentication

Chapter 3 Animation Effects with jQuery and CSS3

View more publications by Mercury Learning and Information
jQuery Pocket Primer
This chapter is in the book jQuery Pocket Primer
ANIMATION EFFECTSWITHJQUERYAND CSS33This chapter shows you how to create HTML5 Web pages that create animation effects and also provide interactivity for users. You’ll see an assortment of jQuery functions that create various animation effects, which you can easily incorporate in your HTML5 Web pages. This eclectic chapter is intended to provide you with many animation effects, along with an assortment of code samples and code fragments that you can incorporate into your other HTML5 Web pages.The first part of this chapter shows you how to use jQuery in order to ma-nipulate the attributes of an element by setting the values of properties in CSS3 selectors, along with examples of creating animation effects using animate and effect. You’ll see code examples that create slide-based and fade-related (fa-deIn, fadeOut, fadeTo) animation effects. This section also illustrates how to create 2D animation effects using jQuery together with CSS3 keyframes.The second part of this chapter illustrates how to create a “follow the mouse” HTML5 Web page that uses CSS3 for the visual effect and jQuery for updating the location of the gradient-filled rectangle. Remember that the CSS3 examples in the chapters of this book are specifically for WebKit-based brows-ers, but you can modify the code samples to include vendor-specific prefixes so that the code samples will run in other browsers. The last example in this chap-ter illustrates how to render SVG with jQuery using a jQuery plugin.Note that this chapter covers jQuery animation effects and chapter seven contains some corresponding animation effects using jQuery Mobile, and that both chapters contain CSS3-based animation effects as well. Due to space con-straints, this chapter covers only a portion of the animation-related functionality that is available in jQuery. You can learn more about jQuery animation by read-ing the online jQuery documentation or by performing an Internet search for additional tutorials and articles.CHAPTER
© 2015 Walter de Gruyter GmbH, Berlin/Boston

ANIMATION EFFECTSWITHJQUERYAND CSS33This chapter shows you how to create HTML5 Web pages that create animation effects and also provide interactivity for users. You’ll see an assortment of jQuery functions that create various animation effects, which you can easily incorporate in your HTML5 Web pages. This eclectic chapter is intended to provide you with many animation effects, along with an assortment of code samples and code fragments that you can incorporate into your other HTML5 Web pages.The first part of this chapter shows you how to use jQuery in order to ma-nipulate the attributes of an element by setting the values of properties in CSS3 selectors, along with examples of creating animation effects using animate and effect. You’ll see code examples that create slide-based and fade-related (fa-deIn, fadeOut, fadeTo) animation effects. This section also illustrates how to create 2D animation effects using jQuery together with CSS3 keyframes.The second part of this chapter illustrates how to create a “follow the mouse” HTML5 Web page that uses CSS3 for the visual effect and jQuery for updating the location of the gradient-filled rectangle. Remember that the CSS3 examples in the chapters of this book are specifically for WebKit-based brows-ers, but you can modify the code samples to include vendor-specific prefixes so that the code samples will run in other browsers. The last example in this chap-ter illustrates how to render SVG with jQuery using a jQuery plugin.Note that this chapter covers jQuery animation effects and chapter seven contains some corresponding animation effects using jQuery Mobile, and that both chapters contain CSS3-based animation effects as well. Due to space con-straints, this chapter covers only a portion of the animation-related functionality that is available in jQuery. You can learn more about jQuery animation by read-ing the online jQuery documentation or by performing an Internet search for additional tutorials and articles.CHAPTER
© 2015 Walter de Gruyter GmbH, Berlin/Boston
Downloaded on 10.10.2025 from https://www.degruyterbrill.com/document/doi/10.1515/9781938549168-005/html?licenseType=restricted&srsltid=AfmBOoowvWsVNGzj5rlVGScMkRXMIx-n2Ecj81KJ7HPVGB1XIlDYMADQ
Scroll to top button