nickmeehan/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 id="hide"> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
  <div class="mascot" id="go">
    <h1 id="paragraph"> My DBC Mascot </h1>
    <img id="move" src="dbc_logo.jpg">
  </div>

</body>

</html>

## jquery_example.js
var bodyElement = []


$(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
 bodyElement = $('body');

//RELEASE 2:
  // Add code here to modify the css and html of DOM elements
$('h1').css({
	'color' : 'green',
	'border' : '3px dashed yellow'
});

$('#hide').css({'visibility' : 'hidden'});


//RELEASE 3: Event Listener
  // Add the code for the event listener here

  $('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://www.nickmeehan.ca/img/PocketGopher_logo.png')
  })


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


//RELEASE 4 : Experiment on your own


// $( "#go" ).click(function() {
//   $( "#move" ).animate({
//     width: "30%",
//     // opacity: 0.4,
//     // marginLeft: "0.6in",
//     // fontSize: "3em",
//     borderWidth: "10px"
//   }, 1500, 'easeInBounce');
// });

$( "#go" ).click(function() {
  $( "#paragraph" ).slideToggle( "slow" );
});


$( "#go" ).click(function() {
  $( "#move" ).animate({
    top : '+=100px'
  }, 2000, "linear", function() {
    // console.log("hello");
    $( this ).after( "<div>Animation complete.</div>" );
  });
});


})  // 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 id="hide"> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
	<div class="mascot" id="go">
	<h1 id="paragraph"> My DBC Mascot </h1>
	<img id="move" src="dbc_logo.jpg">
	</div>

	</body>

	</html>
	var bodyElement = []


	$(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
	bodyElement = $('body');

	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements
	$('h1').css({
	'color' : 'green',
	'border' : '3px dashed yellow'
	});

	$('#hide').css({'visibility' : 'hidden'});


	//RELEASE 3: Event Listener
	// Add the code for the event listener here

	$('img').on('mouseover', function(e){
	e.preventDefault()
	$(this).attr('src', 'http://www.nickmeehan.ca/img/PocketGopher_logo.png')
	})


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



	//RELEASE 4 : Experiment on your own


	// $( "#go" ).click(function() {
	// $( "#move" ).animate({
	// width: "30%",
	// // opacity: 0.4,
	// // marginLeft: "0.6in",
	// // fontSize: "3em",
	// borderWidth: "10px"
	// }, 1500, 'easeInBounce');
	// });

	$( "#go" ).click(function() {
	$( "#paragraph" ).slideToggle( "slow" );
	});


	$( "#go" ).click(function() {
	$( "#move" ).animate({
	top : '+=100px'
	}, 2000, "linear", function() {
	// console.log("hello");
	$( this ).after( "<div>Animation complete.</div>" );
	});
	});





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