Tutorial 3

Click the hot sausage dog to eat!

See how to do it

Step1.Include the link below to use JQuery in your code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Step2.Make your code like the below.

HTML

	
	<section>
		<h2>Tutorial 3</h2>
		<p>Click the hot sausage dog to eat!</p>
		<div class="hot_dog_comp"><img src="images/hot_dog_comp.png"></div>
	</section>

CSS

	
	section {
		width: 960px;
		min-height: 600px;
		margin: 160px auto 0;
		position: relative;
	}

	section h2 {
		text-align: center;
		font-size: 36px;
	}

	section p {
		text-align: center;
		font-size: 24px;
		margin-top: 10px;
	}

	hot_dog_comp {
		position: absolute;
		left:135px;
		top: 190px;
	}

	.hot_dog_comp img {
		cursor: pointer;
	}

JavaScript

	
	(".hot_dog_comp").click(function(){

	    $(".hot_dog_comp img").attr("src","images/hot_dog_comp_anime.gif");
	    $(".hot_dog_comp").animate({left:'-200%'}, 2000);

	    setTimeout(function(){
	    	$("section p").html("The hot sausage dog escaped...refresh the page to see the demo again.");
	    },2000);

	});