Click the hot sausage dog to eat!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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>
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;
}
(".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);
});