views:

49

answers:

1

I am attempting to use the jQuery Frame Animation plugin and cannot get it to work even in the simplest of tests. I have tried to break it down as simply as possible and still cannot seem to get it to work.

Here is a test where I'm referencing the files from the demo and I still can't get it to work:

<html>
<head>
 <style type="text/css">
  #a {
   background: url(http://demo.dev.bitami.com/jQuery/frameanimation/images/logo.png) no-repeat 0px 0px;
   height: 36px;
   width: 100px;
  }
 </style>

 <script type="text/javascript" src="http://demo.dev.bitami.com/jQuery/frameanimation/javascripts/jquery.js"&gt;&lt;/script&gt;
 <script type="text/javascript" src="http://demo.dev.bitami.com/jQuery/frameanimation/javascripts/jquery.frame.animation.js"&gt;&lt;/script&gt;
 <script type="text/javascript">
  $(function(){
   $("#a").frameAnimation();
  });
 </script>
</head>
<body>
<div id="a"></div>
</body>
</html>

Am I crazy? Does this work on anyone else's location machine? Here is the demo page for reference.

A: 

I believe it is because you are not including the stylesheet, the following work...

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://demo.dev.bitami.com/jQuery/frameanimation/stylesheets/style.css" />
    <title>Frame Animation Plugin for jQuery</title>
    <script src="http://demo.dev.bitami.com/jQuery/frameanimation/javascripts/jquery.js"&gt;&lt;/script&gt;
    <script src="http://demo.dev.bitami.com/jQuery/frameanimation/javascripts/jquery.frame.animation.js"&gt;&lt;/script&gt;
</head>
<body>
<a id="d" href="#"></a>
<script>
$(function() {
    $('#d').frameAnimation();
});
</script>
</body>
</html>
Dustin Laine
I got it to work by making sure my background property started at the last frame, like it does in their stylesheet:background:url(../images/logo.png) no-repeat 0px -324px;
creativetim