Hi!
I started learning web design about 4 months ago. I want to become a professional web developer. I learned some html and css and I know enough to make a "static"(?) website. I started learning Javascript but can't quite put it together yet. Then I thought I will try to learn some php because it might be easier than Javascript to get my head around programming logic and then make Javascript more understandable when I go back to it. (Php is making more sense to me than Javascript, I think). A couple of days ago my sister (graphic designer) asked me whether I could do the programming for one of her designs but the client wants a lot of animation in her home page. Things like a swing that swings when you hover over it, a phone that shakes as if it's ringing and a flag that moves in the wind also when you hover it and all of these are also the links to the other pages. So I figured out how to do this in css3 but sadly this is not going to work obviously because so few browsers supports it at the moment. The I came across jstween and was sure that that will fix my problem but now I am stuck with this.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#target {
position: relative;
left: 300px;
top: 100px;
width: 100px;
height: 100px;
display: block;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.10.1.js"></script>
<script type="text/javascript" src="scripts/jstween-1.1.js" ></script>
<script type="text/javascript">
$( '#target' ).tween({
rotate:{
start: 0,
stop: 360,
time: 0,
duration: 2,
effect:'easeInOut'
}
});
$.play();
</script>
</head>
<body>
<img src="images/swing.png" id="target" />
</body>
</html>
I have been reading on the internet for two days trying to figure out why this won't work and I am still convinced that it is some stupid small mistake on my part. Or that I am missing something with the css. Please help!