ireneyiu/jquery_example.html

## jquery_example.html
<!DOCTYPE html>
<html>
<head>
  <title>DOM manipulation with jQuery</title>

  <!-- Add a link to jQuery CDN here script here -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery_example.js"></script>
</head>
<body>
  <h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
  <div class="mascot">
    <h1> My DBC Mascot </h1>
    <img src="dbc_logo.jpg">
  </div>

</body>
</html>

## jquery_example.js
var body, mascot, img;
$(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
body = $('body');
mascot = $('.mascot');
img = $('img');


//RELEASE 2:
  // Add code here to modify the css and html of DOM elements
var header = $('.mascot h1');
header.css({'color': 'brown', 'border': '1px solid #a0a0a0', 'visibility': 'visible'});
header.html('BANANA SLUGS');

//RELEASE 3: Event Listener
  // Add the code for the event listener here
img.on('mouseover', function(e) {
    e.preventDefault();
    $(this).attr('src', 'http://bio.research.ucsc.edu/grad/weaver/Pictures/pure.slug.jpg');
});

img.on('mouseout', function(e) {
    e.preventDefault();
    $(this).attr('src', 'dbc_logo.src');
});

//RELEASE 4 : Experiment on your own
// looping slug back flip
function loop() {
    img.animate({
    	left: "+=50",
    	height: "toggle"
    }, 5000, function() { loop(); });
}
loop();


});  // end of the document.ready function: do not remove or write DOM manipulation below this.
	<!DOCTYPE html>
	<html>
	<head>
	<title>DOM manipulation with jQuery</title>

	<!-- Add a link to jQuery CDN here script here -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery_example.js"></script>
	</head>
	<body>
	<h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
	<div class="mascot">
	<h1> My DBC Mascot </h1>
	<img src="dbc_logo.jpg">
	</div>

	</body>
	</html>
	var body, mascot, img;
	$(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
	body = $('body');
	mascot = $('.mascot');
	img = $('img');


	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements
	var header = $('.mascot h1');
	header.css({'color': 'brown', 'border': '1px solid #a0a0a0', 'visibility': 'visible'});
	header.html('BANANA SLUGS');

	//RELEASE 3: Event Listener
	// Add the code for the event listener here
	img.on('mouseover', function(e) {
	e.preventDefault();
	$(this).attr('src', 'http://bio.research.ucsc.edu/grad/weaver/Pictures/pure.slug.jpg');
	});

	img.on('mouseout', function(e) {
	e.preventDefault();
	$(this).attr('src', 'dbc_logo.src');
	});

	//RELEASE 4 : Experiment on your own
	// looping slug back flip
	function loop() {
	img.animate({
	left: "+=50",
	height: "toggle"
	}, 5000, function() { loop(); });
	}
	loop();






	}); // end of the document.ready function: do not remove or write DOM manipulation below this.