.delay() not working when changing background-color of <div>

[tamercan]

I am just learning JQUERY and I have been playing around with delay() I wrote a fiddle to show you... What I am trying to do is when a button is clicked, change the background-color of the div and then after a few moments switch the background color again. But when I try it, it just switches to the second color and skips the first. HTML:\[code\]<div class = "animation"></div> <button id = "change"> Click </button>\[/code\]Here is the Jquery code:\[code\]$(document).ready(function(){$("#change").click(function(){ $(".animation").css("background", "blue").delay(700).css("background", "red"); });});\[/code\]Here is the link:JSFiddle