Back to the Basics

Part 2

last meeting we covered...

  • selectors
  • manipulation
  • ajax

Tonight we talk about...

  • css
  • effects
  • utilities
  • contributing

Bootstrap Your Site

with Yeoman we'll quickly setup a new website
	$ mkdir mywebsite
	$ cd mywebsite
	$ yeoman init quickstart
now we have
jQuery + Modernizr + HTML5 boiler plate


Where are the demos?



change one property
	$("#foo").css("border", "3px dotted orange")

change more than one style

	   "border" : "3px dotted orange",
	   "opacity": ".5",
	   property : value
Adding Classes

	// multiple classes
	$("div").addClass("foo bar");
Removing Classes

	// multiple classes
	$("div").removeClass("foo bar");

Use a function to remove a class ...
  $("div").removeClass(function() {
  	return $(this).prev().attr('class');

or remove all classes ...



  • Based on duration (not frames)
  • CSS3 vs JS animation
  • easing "swing" or "linear"
  • hide/show
  • fadein/out
  • slide up/down
  • toggle


	// restores el to original value
	// ex: display:'inline-block'


	$("div").fadeTo(2000, 0.5);


beware of padding pop!

Greg will talk about this later...


prevent animation from 
continuously firing, watch... 

jQuery look: Tim Van Damme

	}, function(){

Chaining Animation

each animation will run until it completes
then the next will start


*All animated properties should be animated to a 
single numeric value

	   "left"     : "+=100px",
	   "height"   : "-=50px",
	   "font-size": "60px"
	} , 2000);

if position is set to "static" (the default) animating top, bottom, left and right will have no effect.

animate color with the jQuery-color plugin

CSS3 with jQuery fallback

Test for CSS3 support

"webkitTransition" in
better yet just use Modernizr

	if (Modernizr.csstransitions){
		// CSS3
	} else {
		// jQuery fallback
		$('div').animate( ... );
Modernizr + YepNope.js to conditionaly load CSS3 animation with jQuery fallback

	  test: Modernizr.csstransitions,
	  yep : 'animate-with-css.js',
	  nope: 'animate-with-jquery.js',
	  complete: function(){
	    // initialize the animation

callbacks vs. deferreds

Greg Franko

Github: gfranko

Twitter: gregfranko


You can pass a callback function as a parameter to the jQuery animate() method.
	opacity: 1.0
}, 4000, function() {
	// Animation complete
	console.log("One of the example animations completed");


jQuery Deferred Objects are super helpful for writing maintainable code when dealing with async code (ie. ajax, animations, etc), without resorting to callback hell.
jsbin example
// Wait method that waits x number of seconds to return
function wait(secs) {
	var deferred = new $.Deferred();

	setTimeout(function() {


	}, secs * 1000);

	return deferred;


// Tells the wait method to wait 3 seconds
wait(3).done(function(msg) {

Deferreds and Animations

Deferred/promises fire when a targeted element(s) have completed all animations
	opacity: 1.0
}, 4000);

$(".example").promise().done(function() {
	// All animations have completed
	console.log("All of my the animations are complete");

Animation Differences

  • Callbacks will be called each time a single animation completes.
  • Deferred/promises fires when all elements have completed the animation

jsbin example

jQuery plugin example

jQuery Utility Functions

  • $.extend()
  • $.data()
  • $.map()
  • $.grep()


Merges the contents of two or more objects together into the first object.
jsbin example
var greg1 = {
	name: "Greg Franko",    
	occupation: "JavaScript Engineer",
	interests: {
		"sports": "Golf, Tennis"
var greg2 = {
	name: "Greg Lavallee",
	occupation: "Web Developer",
	interests: {      
		"reading": "Nerd books"
var newPerson = $.extend(true, {}, greg1, greg2);
console.log("New and Improved Greg:", newPerson);


Store and returns arbitrary data associated with the specified element.
jsbin example
$(".test").data("clicked", 0);
	"click": function() {          
		$(this).data("clicked", $(this).data("clicked") + 1);
	"hover": function() {


Allows you to run a function against each item in an array and update each value. Returns a new array.
jsbin example
      var numbers = [3, 6, 10], isEven;      
      isEven = $.map(numbers, function(val, index) {
        return val % 2 === 0;
      // [false, true, true]
      console.log("New Array", isEven);


Allows you to filter an existing array to only return specific values. Returns a new array.
jsbin example
var numbers = [3, 6, 10], evenNumbers;
evenNumbers = $.grep(numbers, function(val, index) {
	return val % 2 === 0;
// [6, 10]
console.log("Even Numbers Array", evenNumbers);

Contributing to jQuery

How you can help (and get help)

Bugs, bugs, bugs

Is that really a bug? Make sure to check:

Bug reporting basics

  1. Specify version(s) of jQuery, OS, browser(s)
  2. Reduce the bug to a test case on jsFiddle, jsbin, etc.
  3. Stay up to date on your bug!

IRC is your Friend

Limechat, freenode web, etc.

[insert warning here]

Straight to the Source


Don't just report it. Fix it!

  1. Fork it
  2. Clone it:
    > git clone
  3. Get in there:
    > cd jquerydc
  4. Add the master:
    > git remote add upstream
  5. Fetch and merge the master
    > git fetch upstream
    	> git merge upstream/master
  6. Run tests!

Write tests for what you fix

If you don't, you'll be asked to.

Check out browserstack for cross browser testing.

Test swarm is rad


Create a pull request. Include information about the ticket from and update the ticket with a link back.