$(document).ready(function(){ //RELEASE 0: //Link this script and the jQuery library to the jquery_example.html file and analyze what this code does. $('body').css({'background-color': 'pink'}); //RELEASE 1: //Add code here to select elements of the DOM var h1 = $("h1"); var image = $("#logo img"); var logo = $('#logo'); //RELEASE 2: // Add code here to modify the css and html of DOM elements h1.css({'border': '2px solid black', 'color': 'blue'}); h1.first().css({'visibility': 'hidden'}); logo.prev().html("POCKET GOPHERS"); logo.css({'width': '563px', 'height': '563px', 'overflow': 'hidden'}) image.css({'height': '563px'}) //RELEASE 3: Event Listener // Add the code for the event listener here /* image.on('mouseover', function(){ image.attr('src', 'http://richditch.wordpress.com/files/2009/04/pocket-gopher-052a-720.jpg') }) image.on('mouseout', function(){ image.attr('src', 'http://s1.evcdn.com/images/edpborder500/I0-001/013/886/832-4.jpeg_/dev-bootcamp-hiring-day-32.jpeg') }) */ //RELEASE 4 : Experiment on your own // Adding animation to the code from release 3 so that pictures fade in/out image.on('mouseover', function() { image.fadeOut(500,function(){ image.attr('src', 'http://richditch.wordpress.com/files/2009/04/pocket-gopher-052a-720.jpg') image.fadeIn(500); }); }); image.on('mouseout', function() { image.fadeOut(500,function(){ image.attr('src', 'http://s1.evcdn.com/images/edpborder500/I0-001/013/886/832-4.jpeg_/dev-bootcamp-hiring-day-32.jpeg') image.fadeIn(500); }); }); // Adding functionality to move logo using right/left buttons var right_btn = $('#right'); var left_btn = $('#left'); logo.css({'position': 'relative'}); right_btn.click(function() { logo.animate({'left': '+=150px'}, 1000); }); left_btn.click(function() { logo.animate({'left': '-=150px'}, 1000); }); }) // end of the document.ready function: do not remove or write DOM manipulation below this.