We're going to create an example that will automatically animate the background image now.
Create a new file using our template called
background-auto.htmland save it in ourjquery-animationdirectory.Since we only have one line of CSS for our example, we aren't going to create a stylesheet. We're going to drop it in the file we just created (
background-auto.html) under the<title>tag:<style> body {background:url(images/background.jpg) top center fixed;} </style>Next, we'll remove the stylesheet
<link>since we won't be using it in this example. This will be the line directly after the code we just added.Lastly, add the following code into our waiting anonymous function:
var yPos = 0; var timer = setInterval(start, 50); function start() { yPos = yPos - 5; $('body').css({ backgroundPosition: '50% ' + yPos + 'px' }); }
The following is a screenshot of what we just created. You'll notice that when...