Beginning jQuery (part 2)

Review of the Code School course“Try jQuery” (parts 4–5)

Review of Levels 4–5http://try.jquery.com/

Simple Interactions

$('#pushie').click(function() {// some code here// more code

});

$('#apple').hover(function() {// some code here// more code

});

“Event handlers” are different$('.confirmation').on('click', 'button', function() {

$(this).closest('.confirmation').find('.ticket').slideDown();});

An event handler always includes .on()In this example, .confirmation is a DIV or other container.Inside the container are one or more buttons.The handler “listens” for a click on any button inside any element with the class .confirmationWhen a click occurs, in this case jQuery travels “up” the DOM to find .confirmation and then “down” the DOM to find .ticket — then it reveals (shows) the .ticket element with a sliding motion.

$('.confirmation').on('click', 'button', function() { // some code here

});

$('button').on('click', function() { // some code here

});

These two are different: The first one “listens” only to the .confirmation element(s).The second one listens to every button element on the whole page.(The second one is not efficient.)

Event Handlers (2)

Event Handlers: Mouse Events

What are we “listening” for?

• click• dblclick• focusin• focusout• mousedown• mouseup

• mouseenter• mouseleave• mousemove• mouseout• mouseover

Mouse Events

• There is no hover that can be used with .on() — there was, in an older version of jQuery, but not anymore.

• So, we use "mouseenter mouseleave" to achieve the same effect as hover.

• Note: Even though mouseover seems similar to mouseenter, and mouseout seems similar to mouseleave, do not use them.

$("#states").on("mouseenter mouseleave",

We will do an exercise (later) that uses this.

Instead of hover

https://github.com/macloo/jquery_exercises

More Event Handlers

Keyboard events

• keydown• keypress• keyup

Form events

• blur • change • focus • select • submit

What about touch and swipe events?

http://jquerymobile.com/

http://jquerymobile.com/

But back to our beginner lessons …

Fading and Sliding!

.fadeIn()

.fadeOut()

.fadeToggle()

.slideIn()

.slideOut()

.slideToggle()

We’ll do two exercises with these, later.

hideslidefade.html

slideToggle.html

https://github.com/macloo/jquery_exercises

Styling• Do not stick a lot of CSS styles into your jQuery functions:

$(this).css('background-color', '#252b30');$(this).css('border-color', '1px solid

#967');

• Instead, you should put CSS styles in your stylesheet (where they belong), and use them like this:

$(this).addClass('highlight');$(this).removeClass('highlight');

• You can also toggle styles:$(this).toggleClass('highlight');

.animate()

$('#vacations').on('click', '.vacation', function() {$(this).toggleClass('highlighted'); $(this).animate( {'top': '-10px'} );

});

Here, jQuery will make the element with the class .vacation slide up (but not disappear) on the page, by 10 pixels, when it has been clicked.Note: The element needs to have position set to relative in the CSS, or this won’t work.

$('#vacations').on('click', '.vacation', function() {$(this).toggleClass('highlighted');if($(this).hasClass('highlighted')) {

$(this).animate({'top': '-10px'});} else {

$(this).animate({'top': '0px'});}

});

Here we see an if statement inside the jQuery function. It plays off the .toggleClass() method, which adds/removes ‘highlighted’(from Code School lessons).

Reverse the animation

Control the speed

$(this).animate( {'top': '-10px'}, 400 );$(this).animate( {'top': '-10px'}, 'fast' ); $(this).animate( {'top': '-10px'}, 200 );$(this).animate( {'top': '-10px'}, 'slow' ); $(this).animate( {'top': '-10px'}, 600 );

Animate more than one thing

$(this).find('.per-night').animate( {'opacity': '1', 'top':'-14px' } );

Basically, you can animate anything that you can change or control with CSS.

Because—ahem!—CSS is doing the animation!

However!

• Direct CSS transitions are faster than jQuery:http://stackoverflow.com/questions/10984771/whats-faster-css3-transitions-or-jquery-animations

• You have more control with jQuery (but it will

be slower overall). Less code with jQuery.• So you need to judge: CSS, or jQuery?

http://api.jquery.com/animate/ (Lots of examples here)

• CSS transitions – demos and more:http://css3.bradshawenterprises.com/transitions/

jQuery vs. CSSMaybe you didn’t know about CSS3 transitions …

#apple {width: 100px;height: 100px;transition: width 2s, height 2s;/* Firefox */-moz-transition: width 2s, height 2s, -moz-transform

2s; /* Safari and Chrome */-webkit-transition: width 2s, height 2s, -webkit-

transform 2s; /* Opera */-o-transition: width 2s, height 2s, -o-transform 2s; }https://github.com/macloo/jquery_exercises

CSS3 transitions need more code

transition: width 2s, height 2s;/* Firefox */

-moz-transition: width 2s, height 2s, -moz-transform 2s;

/* Safari and Chrome */-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

/* Opera */-o-transition: width 2s, height 2s, -o-transform 2s;

jQuery vs. CSS

Again, we’ll do two exercises to learn more about animation in the browser.

With jQuery:animate.html

Without jQuery:animation_with_css.html

https://github.com/macloo/jquery_exercises

Beginning jQuery (part 2)

Review of the Code School course“Try jQuery” (parts 4–5)