onclick change class
Page 1 of 1 • Share
- grimofdoomMember
- Forum Posts : 106
Member Since : 2012-03-06
i am creating an animation demo for a future project peice of mine but when i implimented javascript function to onclick change class,nothing happened(click here to see results).i am using this(whole page of code)code for the page:
- Code:
<head>
<style type=text/javascript>
function changeClass(elem, move,moveback)
{
elem.className = (elem.className == move)?moveback:move;
}
</style>
<style type="text/css">
#move{width:100px;height:100px;-o-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;background:red;position:relative;}
.moveback
{
width:100px;height:100px;-webkit-border-radius:10px;background:red;position:relative;
animation: moveback 1s linear 1 infinite forwards;
/* Firefox: */
-moz-animation :moveback 1s linear 1 alternate forwards;
/* Safari and Chrome: */
-webkit-animation: moveback 1s linear 1 alternate forwards;
}
.move
{
width:100px;height:100px;-webkit-border-radius:10px;background:red;position:relative;
animation:move 1s linear 1 alternate forwards;
/* Firefox: */
-moz-animation:move 1s linear 1 alternate forwards;
/* Safari and Chrome: */
-webkit-animation: move 1s linear 1 alternate forwards;
}
@keyframes moveback
{
0% {background:blue; left:500px; top:200px; transform:scale(1.7)}
50% {background:green; transform:rotateY(120deg)}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes moveback /* Firefox */
{
0% {background:blue; left:500px; top:200px; -moz-transform:scale(1.7)}
50% {background:green; -moz-transform:rotateY(120deg)}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes moveback /*Safari and Chrome */
{
0% {background:blue; left:500px; top:200px; -webkit-transform:scale(1.7)}
50% {background:green; -webkit-transform:rotateY(120deg)}
100% {background:red; left:0px; top:0px;}
}
/*move*/
@keyframes move
{
0% {background:red; left:0px; top:0px;}
50% {background:green; transform:rotateY(120deg)}
100% {background:blue; left:500px; top:200px; transform:scale(1.7)}
}
@-moz-keyframes move /* Firefox */
{
0% {background:red; left:0px; top:0px;}
50% {background:green; -moz-transform:rotateY(120deg)}
100% {background:blue; left:500px; top:200px; -moz-transform:scale(1.7)}
}
@-webkit-keyframes move /*Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
50% {background:green; -webkit-transform:rotateY(120deg)}
100% {background:blue; left:500px; top:200px; -webkit-transform:scale(1.7)}
}
</style>
</head>
<body>
<div class=move id=move onclick='changeClass(this,"move","moveback");'></div>
</body>
- LGforumModerator
- Forum Posts : 77
Member Since : 2011-11-12
You've put the Javascript in style tags.
- grimofdoomMember
- Forum Posts : 106
Member Since : 2012-03-06
Oh woww. I feel so stupid(but i did just start using javascript for the first time)it works now,thanks.
- Sponsored content
Similar topics
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum