JavaScript & jQuery www.profburnett.com Session III Chapter 9 – Effects, Animations, Swapping/Rolling Images, Link Behavior www.profburnett.com Master a Skill / Learn for Life
Class Outline jQuery Effects Basic Showing and Hiding Fading Elements In and Out Sliding Elements Fading Examples Animations Animations Examples - 1 Other Animation Methods Animations Examples - 2 Performing an Action After an Effect Is Completed jQuery and CSS3 Transitions and Animations jQuery and CSS Transitions jQuery and CSS Animations Swapping Images Swapping Images with jQuery Rollover Images Controlling How Links Behave Opening External Links in a New Window Creating New Windows W3School Exercises - Effects Student Exercises 9-1 – Animation 9-2 – Slide Show App 9-3 – Carousel App 2/22/2019 Copyright © Carl M. Burnett
Basic Showing and Hiding Method Description hide() Hides the selected elements show() Shows the selected elements toggle() Toggles between the hide() and show() methods
Fading Elements In and Out Method Description fadeIn() Fades in the selected elements fadeOut() Fades out the selected elements fadeTo() Fades in/out the selected elements to a given opacity fadeToggle() Toggles between the fadeIn() and fadeOut() methods
Sliding Elements Method Description slideDown() Slides-down (shows) the selected elements slideToggle() Toggles between the slideUp() and slideDown() methods slideUp() Slides-up (hides) the selected elements
Basic Syntax for Fade Methods The basic syntax for all of the methods except the fadeTo method methodName([duration][, callback]) The basic syntax for the fadeTo method fadeTo(duration, opacity[, callback])
fadeOut and fadeTo Methods HTML <h1 id="startup_message">Temporarily under construction!</h1> jQuery that fades the heading out over 5 seconds $("#startup_message").fadeOut(5000); jQuery that uses chaining to fade the heading out and slide it back down $("#startup_message").fadeOut(5000).slideDown(1000); Chaining with fadeTo methods $("#startup_message").fadeTo(5000, .2).fadeTo(1000, 1);
fadeTo w/callback function HTML <h1 id="startup_message">Temporarily under construction!</h1> jQuery with a callback function that gets the same result as the chaining $("#startup_message").fadeTo(5000, .2, function() { // start callback function $(this).fadeTo(1000, 1); } // end callback function );
Fading Examples FAQ Effects Application Slide Show Fading Application 1 Slide Show Fading Application 2 Slide Show Stop and Start Application
Basic Syntax for Animate Method animate({properties}[, duration][, callback])
Animations $('#message').animate( { left: '650px’, opacity: .5, fontSize: '24px’ }, 1500 ); Object literal containing the CSS properties Animation lasts 1,500 milliseconds, or 1.5 seconds
Easing $('#message').animate( { left: '650px’, opacity: .5, fontSize: '24px’ }, 1500 ‘linear’ ); Object literal containing the CSS properties Animation lasts 1,500 milliseconds, or 1.5 seconds Easing method
Performing an Action After an Effect Is Completed $('#photo').width(0).height(0).css('opacity',0); $('#caption').hide(); $('#photo').animate( { width: '200px’, height: '100px’, opacity: 1 }, 1000, function() { $('#caption').fadeIn(1000); } Hide the photo and caption first Callback function
HTML for Animation An animated heading that is moving into the “faqs” section <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FAQs</title> <link rel="stylesheet" href="main.css"> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="faqs.js"></script> </head>
HTML for Animation <body> <main id="faqs"> <h1>jQuery FAQs</h1> <h2><a href="#">What is jQuery?</a></h2> <div> <p>jQuery is a library of the JavaScript functions that you're most likely to need as you develop websites.</p> </div> <h2><a href="#">Why is jQuery becoming so popular?</a></h2> <p>Three reasons:</p> <ul> <li>It's free.</li> <li>It lets you get more done in less time.</li> <li>All of its functions are cross-browser compatible.</li> </ul> <h2><a href="#">Which is harder to learn: jQuery or JavaScript?</a></h2> <p>For most functions, jQuery is significantly easier to learn and use than JavaScript. But remember that jQuery is JavaScript.</p> </main> </body> </html>
CSS for the h1 heading #faqs h1 { position: relative; left: -175px; font-size: 75%; opacity: .2; }
jQuery Animate Method for h1 Without a callback function $("#faqs h1").animate( { fontSize: "275%", opacity: 1, left: 0 }, 2000 ); // end animate
jQuery Animate Method for h1 With a callback function $("#faqs h1").animate( { fontSize: "275%", opacity: 1, left: "+=175" }, 2000, function() { $("#faqs h2").next().fadeIn(1000).fadeOut(1000); } ); // end animate
Chained Animations $("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000 ) .animate( fontSize: "175%", left: "-=275" 1000 ); }); // end click
Queued Animations $("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000 ); fontSize: "175%", left: "-=275" 1000 ); }); // end click
Animation with Second Animation in its Callback Function $("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000, function() { fontSize: "175%", left: "-=275" }, 1000 ); } // end function ); }); // end click
Animation Examples - 1 FAQ Animation FAQ Chaining Animation
Other jQuery Animation Methods Description delay() Sets a delay for all queued functions on the selected elements finish() Stops, removes and completes all queued animations for the selected elements stop() Stops the currently running animation for the selected elements
HTML for Heading when page loaded <h1 id="startup_message">Temporarily under construction!</h1> jQuery that fades the heading out after 5 seconds $("#startup_message").delay(5000).fadeOut(1000);
HTML & CSS The HTML for the thumbnail images <ul id="image_list"> <li><a href="images/h1.jpg" title="James Allison: 1-1" <img src="thumbnails/t1.jpg" alt=""></a></li> // four more li elements that contain thumbnail images <li><a href="images/h6.jpg" title="James Allison: 1-6"> <img src="thumbnails/t6.jpg" alt=""></a></li> </ul> The CSS for the <a> elements a { position: relative; }
Stop the queued animations before starting a new one $("#image_list a").hover( function(evt) { $(this).stop(true).animate( { top: 15 }, "fast"); }, { top: 0 }, "fast"); } ); // end hover
Syntax for Easing Effects and Animations The syntax for all the basic methods except fadeTo methodName([duration][, easing][, callback]) The syntax for the fadeTo method fadeTo(duration, opacity[, easing][, callback]) The syntax for the basic animate method animate({properties}[, duration][, easing][, callback])
jQuery Easing Plugin from a CDN <!-- the element for jQuery easings must come after the one for jquery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/ easing/1.3/jquery.easing.min.js"> </script>
Two Easings used in FAQs App $("#faqs h2").click(function() { $(this).toggleClass("minus"); if ($(this).attr("class") == "minus") { $(this).next().slideDown(1000, "easeOutBounce"); } else { $(this).next().slideUp(1000, "easeInBounce"); }); // end click
Two Easings for Animated Heading $("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000, "easeInExpo" ) .animate( fontSize: "175%", left: "-=275" 1000, "easeOutExpo" ); }); // end click
Advanced Syntax for Animate Method $("#faqs h1").animate( { fontSize: "650%", opacity: 1, left: "+=175" }, { duration: 2000, specialEasing: { fontSize: "easeInExpo", left: "easeOutExpo" complete: function() { $("#faqs h2").next().fadeIn( 1000).fadeOut(1000); } } ); // end animate
Animate Method with Advanced Syntax $("#faqs h1").animate( { fontSize: "650%", opacity: 1, left: "+=175" }, { duration: 2000, specialEasing: fontSize: "easeInExpo", left: "easeOutExpo" complete: function() { $("#faqs h2").next().fadeIn( 1000).fadeOut(1000); } } ); // end animate
Easings with the Basic Syntax $("#faqs h1").animate( { fontSize: ["650%", "easeInExpo"], opacity: [1, "swing"], left: ["+=275", "easeOutExpo"] }, 2000 ); // end animate
jQuery Animation Queues Methods Description clearQueue() Removes all remaining queued functions from the selected elements dequeue() Removes the next function from the queue, and then executes the function hide() Hides the selected elements queue() Shows the queued functions on the selected elements show() Shows the selected elements
Animation Examples - 2 FAQ Animation with Easing Carousel Animation Image Swap Animation w/Stop
jQuery and CSS3 Transitions and Animations Not all Browsers support CSS3 Transitions and Animations You can also add the CSS3 Transitions and Animations with Modernzer.
All are part of most RWD Frameworks Common jQuery Tasks Swapping Images Swapping Images with jQuery Rollover Images Controlling How Links Behave Opening External Links in a New Window Creating New Windows All are part of most RWD Frameworks
Changing an Image’s src Attribute var newPhoto = new Image(); newPhoto.src = 'images/newImage.jpg'; $('#photo').attr( { src: newPhoto.src, width: newPhoto.width, height: newPhoto.height });
Swapping Images <img src="sad.png" alt="Sad Face" height="50" width="50" id="swap"> $('#swap').replaceWith( '<img src="happy.png" alt="Happy Face" height="100" width="150" id="swap">’ );
Preloading Images var newPhoto = new Image(); newPhoto.src = 'images/newImage.jpg’; var preloadImages = ['images/roll.png’, 'images/flower.png’, 'images/cat.jpg’]; for (var i=0; I < preloadImages.length; i++) { new Image().src = preloadImages[i]; }
Rollover Images <script src="js/jquery.min.js"></script> $(document).ready(function() { var newPhoto = new Image(); newPhoto.src = 'images/newImage.jpg’; var oldSrc=$('#photo').attr('src’); $('h1').hover( function() { $('#photo').attr('src’, NewPhoto.src); }, $('#photo').attr('src', oldSrc); }); // end hover }); // end ready </script>
Controlling How Links Behave $('a[href^="http://"]').each(function() { var href = $(this).attr('href’); href = href.replace('http://',‘’); $(this).after(' (' + href + ')’); });
Opening External Links in a New Window <script src="js/jquery.min.js"></script> <script> $(document).ready(function() { var myURL = location.protocol + '//' + location.hostname; $('a[href^="http://"], a[href^="https://"]’)↵ .not('[href^="'+myURL+'"]').attr('target','_blank’); }); </script>
Creating New Windows var newWin= open('http://www.google.com/', 'theWin','height=200,width=200'); var winProps = 'width=400,height=300,location=yes’; var newWin = open('about.html','aWin',winProps);
Windows Properties Properties Description height Height of the window (pixels). Can’t specify percentage values or any other measurement beside pixels. Web browser matches the height of the current window if not specified. width Width of the window (pixels). Web browser matches the width of the current window if not specified. left Position, in pixels, from the left edge of the monitor. top Position, in pixels, from the top edge of the monitor. scrollbars Appear at the right and bottom edges of a browser window. Hide the scrollbar – Property: “no”. Chrome and Safari, won’t let you hide scrollbars.
Windows Properties Properties Description status Status bar at the bottom of the window. Firefox and Internet Explorer always visible in those browsers. toolbar Visibility of the toolbar containing the navigation buttons, bookmark button, and other controls. On Safari, toolbar and location settings are the same: location Whether the location field is visible. (Also known as the address bar) Opera, Internet Explorer, and Firefox cannot hide a page’s location. Safari displays the toolbars as well as the location field with this property turned on. menubar Browsers that have a menu at the top of their windows Applies only to Windows browsers Other Window Methods and Events
W3School Exercises - Effects Exercise 1 – Hide/Show Exercise 2 - Fade Exercise 3 - Slide Exercise 4 - Animate
Student Exercises 9-1 – Animation on page 286 9-2 – Slide Show App on page 287 9-3 – Carousel App on page 288 Create links to your Web4Students Webpage. Preview updated Web4Students Webpage. Post Chapter 9 Exercises and update Web4Students Webpage to Live site. 2/22/2019 Copyright © Carl M. Burnett
Class Review jQuery Effects Basic Showing and Hiding Fading Elements In and Out Sliding Elements Fading Examples Animations Animations Examples - 1 Other Animation Methods Animations Examples - 2 Performing an Action After an Effect Is Completed jQuery and CSS3 Transitions and Animations jQuery and CSS Transitions jQuery and CSS Animations Swapping Images Swapping Images with jQuery Rollover Images Controlling How Links Behave Opening External Links in a New Window Creating New Windows W3School Exercises - Effects Student Exercises 9-1 – Animation 9-2 – Slide Show App 9-3 – Carousel App 2/22/2019 Copyright © Carl M. Burnett