I'm coding a cube but can not get it to rotate properly, could anybody help me out? I have tried everything. Link to my code is below:
Codepen Link
#keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
body .cube {
overflow: visible;
perspective: 800px;
perspective-origin: 100px 100px;
margin-top: 50px;
margin-left: 200px;
position: relative;
animation: spin 10s linear infinite;
transform-origin: 150px 150px;
transform-style: preserve-3d;
transform-box: fill-box;
}
body .cube h1 {
text-align: center;
transform: translateY(350%);
}
body .cube .frontside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background-color: green;
transform: translateZ(150px);
}
body .cube .backside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background-color: black;
transform: translateZ(-150px);
}
body .cube .leftside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background: purple;
transform: translateX(-150px) rotateY(90deg);
}
body .cube .rightside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background-color: midnightblue;
transform: translateX(150px) rotateY(90deg);
}
body .cube .topside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background-color: yellow;
transform: translateY(-150px) rotateX(90deg);
}
body .cube .bottomside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background: red;
transform: translateY(150px) rotateX(90deg);
}
<div class="cube">
<div class="frontside"><h1>Hello1</h1></div>
<div class="backside"><h1>Hello2</h1></div>
<div class="leftside"><h1>Hello3</h1></div>
<div class="rightside"><h1>Hello4</h1></div>
<div class="topside"><h1>Hello5</h1></div>
<div class="bottomside"><h1>Hello6</h1></div>
</div>
If this is not what you want, modify the question
#keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
body .cube {
overflow: visible;
perspective-origin: 100px 100px;
margin-top: 50px;
margin-left: 200px;
position: relative;
transform-origin: 150px 150px;
transform-style: preserve-3d;
transform-box: fill-box;
height: 200px;
width: 200px;
-webkit-animation: spin 15s infinite linear;
}
body .cube h1 {
text-align: center;
transform: translateY(350%);
}
body .cube .frontside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background-color: green;
transform: translateZ(150px);
}
body .cube .backside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background-color: black;
transform: translateZ(-150px);
}
body .cube .leftside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background: purple;
transform: translateX(-150px) rotateY(90deg);
}
body .cube .rightside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background-color: midnightblue;
transform: translateX(150px) rotateY(90deg);
}
body .cube .topside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background-color: yellow;
transform: translateY(-150px) rotateX(90deg);
}
body .cube .bottomside {
width: 300px;
height: 300px;
position: absolute;
margin: 0;
opacity: 0.5;
background: red;
transform: translateY(150px) rotateX(90deg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="1.css">
<script type="text/javascript"></script>
</head>
<body>
<div class="cube">
<div class="frontside"><h1>Hello1</h1></div>
<div class="backside"><h1>Hello2</h1></div>
<div class="leftside"><h1>Hello3</h1></div>
<div class="rightside"><h1>Hello4</h1></div>
<div class="topside"><h1>Hello5</h1></div>
<div class="bottomside"><h1>Hello6</h1></div>
</div>
</body>
</html>
Related
I want to move the blue container around the circle (with it's bottom margin if possible). What I succeded until now is to move it by it's center(still not so smooth).
Does css has any option to translate & rotate in a circle direction? What I tried was to translate and rotate at the same time by using this three points (top, right, and top-right) of the circle, because I only need it to rotate 90 deg.
#mainContent{ position: relative;
display: block;
width: 100vw;
border: none;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle{
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container{
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element{
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 60px;
background: blue;
transform-origin: center;
transform: translate(-50%, -50%);
animation: orbit 3s linear infinite;
}
#keyframes orbit{
0% {
transform-origin: center;
transform: translate(-50%, calc(-50% - 50px)) rotate(0deg);
}
50%{
transform-origin: center;
transform: translate(calc(-50% + 35.35px), calc(-50% - 35.35px)) rotate(45deg);
}
100% {
transform-origin: center;
transform: translate(calc(-50% + 50px), -50%) rotate(90deg);
}
}
*{
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
You have to play with the transform-origin
#mainContent {
position: relative;
display: block;
width: 100vw;
border: none;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle {
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container {
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element {
position: absolute;
top: 50%;
left: calc(50% - 10px);
width: 20px;
height: 60px;
background: blue;
transform-origin: top center;
animation: orbit 3s linear infinite;
}
#keyframes orbit {
to {
transform: rotate(360deg);
}
}
* {
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
If i understand right, you need to set the translate-origin to the side which the blue rectangle reach the center of the red circle, check the snipet:
(hover the red circle to hide the blue rectangle)
div {
position: relative;
width: 200px;
height: 200px;
margin: 10em auto;
}
.round {
border-radius: 100%;
background: red;
}
.round:hover + .rectangle{background:transparent;}
.rectangle {
width: 100%;
height: 20px;
background: blue;
position: absolute;
top: 0;
bottom: 0;
right: 50%;
margin: auto;
transform-origin: right;
transform: rotate(0deg);
animation: orbit 3s linear infinite;
}
.moon{
width:50px;height:50px;
background:white;
border:1px solid gray;
border-radius:100%;
position:absolute;
top:0;
bottom:0;
margin:auto;
}
#keyframes orbit {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(359deg);
}
}
<div>
<div class="round"></div>
<div class="rectangle">
<div class="moon"></div>
</div>
</div>
Don't center the element but put it on the top side and then adjust the transform-origin to make it at the center of the circle:
#mainContent {
position: relative;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle {
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container {
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element {
position: absolute;
top: calc(50% - 80px); /* 80 = (60 + 100)/2*/
left: calc(50% - 10px);
width: 20px;
height: 60px;
background: blue;
transform-origin: 50% calc(100% + 20px); /* 20 = (100 - 60)/2 */
animation: orbit 3s linear infinite;
}
#keyframes orbit {
100% {
transform: rotate(360deg);
}
}
* {
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
I have tried a multitude of "fixes" to try to fix the animation and just cant figure out why behavior differs so much from chrome and safari. The only it seems like backface visibility is not being applied but the common fix of applying rotateY(0deg) to the parent doesnt fix the issue
.scene {
margin-left: auto;
margin-right: auto;
margin-top: 10em;
width: 10em;
height: 10em;
perspective: 800px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
-webkit-animation: spinning 12s linear infinite;
animation: spinning 12s infinite;
transform-style: preserve-3d;
transform-origin: center;
}
#-webkit-keyframes spinning {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spinning {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
.out-side {
display: flex;
width: 200%;
height: 100%;
position: absolute;
line-height: 10em;
text-align: center;
-moz-backface-visibility: hidden;
}
.cover {
height: 100%;
width: 50%;
border-style: solid;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
background-color: blue;
}
.back {
transform: rotateY(-50deg);
transform-origin: right;
height: 100%;
width: 50%;
border-style: solid;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
background-color: blue;
}
.in-side {
display: flex;
width: 200%;
height: 100%;
position: absolute;
line-height: 10em;
text-align: center;
-moz-backface-visibility: hidden;
}
.left {
height: 100%;
width: 50%;
border-style: solid;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
background-color: red;
transform: rotateY(-180deg) !important;
transform-origin: right;
}
.right {
transform: rotateY(-230deg) !important;
transform-origin: left;
height: 100%;
width: 50%;
border-style: solid;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
background-color: red;
}
<div class="scene">
<div class="cube">
<div class="out-side">
<div class="back">back</div>
<div class="cover">cover</div>
</div>
<div class="in-side">
<div class="left">
<img style="width:100%;height:auto;" src="https://www.sciencenewsforstudents.org/wp-content/uploads/2020/10/100220_CG_megalodon_feat-1028x579.jpg" />
</div>
<div class="right">
<img style="width:100%;height:auto;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpNBYv1lZ9MxxDR0qlqYm88RLm5ymSmf03dg&usqp=CAU" />
</div>
</div>
</div>
</div>
I have created a loader using loader.io and integrated the css and HTML in the angular application but my loader is not displayed on the center of the screen with backdrop as it should.
#keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 71.96px;
left: 71.96px;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform-origin: 56.54px 58.852999999999994px;
}
.loader-container {
width: 257px;
height: 257px;
display: inline-block;
overflow: hidden;
background: blue;
}
.loader {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.loader div { box-sizing: content-box; }
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
I want to bring the loader to the center.
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 50%;
left: 50%;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<body>
<div class="centered">
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
</div>
<style>
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
color:darkred;
}
#keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 71.96px;
left: 71.96px;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform-origin: 56.54px 58.852999999999994px;
}
.loader-container {
width: 257px;
height: 257px;
display: inline-block;
overflow: hidden;
background: blue;
}
.loader {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.loader div { box-sizing: content-box; }
</style>
</body>
</html>
I'm trying to get into CSS animations and I can't figure out how to "transform: translateZ(200px)" on the span element with the ".logo" class.
I want to have "Z-Text" floating on the yellow background of "#box3", I applied the preserve-3d transform-style but without any effect.. translateX and Y working fine though.
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 400px;
width: 400px;
border: 1px solid white;
}
#outer-box {
height: 100px;
width: 100px;
background-color: black;
transform-style: preserve-3d;
animation: spin 5s linear infinite;
}
#outer-box > div {
position: absolute;
}
#box2 {
height: 100px;
width: 100px;
top: -50px;
background-color: green;
transform: rotateX(0.25turn);
}
#box3 {
height: 100px;
width: 100px;
background-color: yellow;
top: 50px;
opacity: 0.5;
transform-style: preserve-3d;
transform: rotateX(0.25turn);
perspective: 1000px;
}
.logo {
position: absolute;
transform: translateZ(200px);
}
#box4 {
height: 100px;
width: 100px;
left: 50px;
background-color: blue;
opacity: 0.5;
transform: rotateY(0.25turn);
}
#keyframes spin {
0% {
transform: rotateY(0) rotateX(0deg);
}
50% {
transform: rotateY(180deg) rotateX(180deg);
}
75% {
transform: rotateY(270deg) rotateX(270deg);
}
100% {
transform: rotateY(359deg) rotateX(359deg);
}
}
<div class="container">
<div id="outer-box">
<div id="box2">Any Text</div>
<div id="box3">
<span class="logo">Z-Text</span>
</div>
<div id="box4">Some Text</div>
</div>
</div>
Any suggestions?
The following HTML5 and CSS3 animation is giving me two different issues and I've not been able to find previous answers to the question that have worked on my code. I'm curious if I'm doing something completely wrong here.
I have tried the solutions in this question, and this one with no results.
The two issues:
1.) The moon orbit transforms fine; the moon, as a child element, transforms as well. I attempt to apply the opposite transform but it doesn't appear to have any effect.
2.) I'm trying to alter the z-index so the moon goes behind the planet. The orbit border is temporary so no worries there but no matter what I set the z-index to I can't get the effect.
body {
height: 100%;
top: 0px;
bottom: 0px;
margin-top: 300px;
background-color: #143856;
}
.moonorbit {
position: relative;
top: -249px;
left: 309px;
width: 500px;
height: 500px;
border: 2px solid white;
border-radius: 50%;
-moz-transform: rotateX(75deg);
-webkit-transform: rotateX(75deg);
-o-transform: rotateX(75deg);
-ms-transform: rotateX(75deg);
transform: rotateX(75deg);
}
.mooncontainer {
position: absolute;
top: 175px;
left: 175px;
width: 150px !important;
height: 150px;
-moz-transform: rotateX(-75deg);
-webkit-transform: rotateX(-75deg);
-o-transform: rotateX(-75deg);
-ms-transform: rotateX(-75deg);
transform: rotateX(-75deg);
animation: moon-orbit 10s linear infinite;
}
.moon {
width: 150px !important;
height: 150px;
border-radius: 50%;
background: red url(img/planets_MOON.png) no-repeat;
background-size: cover;
animation: rotate 10s linear infinite;
}
.earth {
position: absolute;
width: 417px;
top: 100px;
left: 350px;
z-index: 0;
height: 209px;
}
.earth .planet {
/*width: 417px !important;
height: 417px;*/
width: 300px !important;
height: 300px;
background: yellow url(img/planets_EARTH.png) no-repeat;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
}
/*Moon Orbit*/
#keyframes moon-orbit {
0% {
transform: rotateZ(0deg) translateX(250px);
}
100% {
transform: rotateZ(360deg) translateX(250px);
}
}
#keyframes rotate {
0% {
z-index: 5;
transform: rotateZ(0deg);
}
25% {
z-index: -5;
}
50% {
z-index: -5;
}
75% {
z-index: 5;
}
100% {
z-index: 5;
transform: rotateZ(-360deg);
}
}
<body>
<div class="earth">
<div class="planet"></div>
</div>
<div class="moonorbit">
<div class="mooncontainer">
<div class="moon"></div>
</div>
</div>
</body>
About your first issue, you are applying the technique ok. But there are 2 transformations that you need to correct, the one from the animation of the circle, that you have done, and the one from the inclination of the orbit (the rotateX(75deg)
This would be your demo with the correction applied
body {
height: 60%;
top: 0px;
bottom: 0px;
margin-top: 300px;
background-color: #143856;
}
.moonorbit {
position: relative;
top: -300px;
left: 209px;
width: 500px;
height: 500px;
border: 2px solid white;
border-radius: 50%;
transform: rotateX(75deg);
transform-style: preserve-3d;
}
.mooncontainer {
position: absolute;
top: 175px;
left: 175px;
width: 150px !important;
height: 150px;
-webkit-transform: rotateX(-75deg);
transform: rotateX(-75deg);
animation: moon-orbit 10s linear infinite;
transform-style: preserve-3d;
}
.moon {
width: 150px !important;
height: 150px;
border-radius: 50%;
background-color: white;
background-size: cover;
animation: rotate 10s linear infinite;
transform-style: preserve-3d;
}
.earth {
position: absolute;
width: 417px;
top: 100px;
left: 250px;
z-index: 0;
height: 209px;
}
.earth .planet {
/*width: 417px !important;
height: 417px;*/
width: 300px !important;
height: 300px;
background-color: lightgreen;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
}
/*Moon Orbit*/
#keyframes moon-orbit {
0% {
transform: rotateZ(0deg) translateX(250px);
}
100% {
transform: rotateZ(360deg) translateX(250px);
}
}
#keyframes rotate {
0% {
transform: rotateZ(0deg) rotateX(-75deg); /* added rotateX(-75deg) to compensate */
}
100% {
transform: rotateZ(-360deg) rotateX(-75deg);
}
}
<div class="earth">
<div class="planet"></div>
</div>
<div class="moonorbit">
<div class="mooncontainer">
<div class="moon"></div>
</div>
</div>
About the second issue, your best bet is to work all the time in 3d, so it will be automatically solved. Another technique that makes it simpler is to chain the transforms. In my demo I have chained everything, so it's easier to get the control (and you have a simpler HTML
body {
height: 60%;
top: 0px;
bottom: 0px;
background-color: #143856;
}
.moon {
width: 150px;
height: 150px;
border-radius: 50%;
background: url(http://i.stack.imgur.com/L3IE5.jpg);
background-size: 120%;
background-position: center center;
animation: rotate 10s linear infinite;
transform-style: preserve-3d;
margin: auto;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.earth {
position: absolute;
width: 300px;
height: 300px;
background: url(http://i.stack.imgur.com/5sqwZ.jpg);
background-size: 140%;
background-position: center center;
border-radius: 50%;
margin: 100px 200px;
perspective: 1500px;
transform-style: preserve-3d;
}
#keyframes rotate {
0% {
transform: rotateX(-75deg) rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateX(75deg);
}
100% {
transform: rotateX(-75deg) rotateZ(-360deg) translateX(300px) rotateZ(360deg) rotateX(75deg);
}
}
<div class="earth">
<div class="moon"></div>
</div>
Trying to fix this with z-index will end in failure 70% all the time. lol See what I did there? Anyways, your best bet is to do this with a keyframes. Create a keyframe to draw out your path and to be honest you will need other things that would take a while to explain but How about I'll post my code here and the DEMO and you will be able to see the difference?
HTML
<div id="universe" class="scale-stretched">
<div id="solar-system" class="earth">
<div id="earth" class="orbit">
<div class="pos">
<div class="planet"> </div>
</div>
</div>
<div id="sun"> </div>
</div>
</div>
CSS
#universe {
z-index: 1;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background-position: center 40%;
background-repeat: no-repeat;
background-size: cover; }
#solar-system {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d; }
.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform-style: preserve-3d;
animation-name: orbit;
animation-iteration-count: infinite;
animation-timing-function: linear; }
.orbit .orbit {
animation-name: suborbit; }
.pos {
position: absolute;
top: 50%;
width: 2em;
height: 2em;
margin-top: -1em;
margin-left: -1em;
transform-style: preserve-3d;
animation-name: invert;
animation-iteration-count: infinite;
animation-timing-function: linear; }
#sun, .planet, #earth{
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
border-radius: 50%;
transform-style: preserve-3d; }
#sun {
background-color: #FB7209;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); }
.planet {
background-color: #202020;
background-repeat: no-repeat;
background-size: cover;
animation-iteration-count: infinite;
animation-timing-function: linear; }
.ring {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%; }
#earth {
z-index: 8; }
#sun {
z-index: 1; }
#keyframes orbit {
0% {
transform: rotateZ(0deg); }
100% {
transform: rotateZ(-360deg); } }
#keyframes invert {
0% {
transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
.view-3D #solar-system {
transform: rotateX(75deg); }
.view-3D #sun {
transform: rotateX(-90deg); }
#earth .pos,
#earth .planet,
#earth.orbit {
animation-duration: 12.00021s; }
#earth .orbit .pos,
#earth .orbit {
animation-duration: 0.89764s; }
.scale-stretched #sun {
font-size: 24em; }
.scale-stretched #earth .planet {
font-size: 3.92em; }
.scale-stretched #earth.orbit {
width: 56em;
height: 56em;
margin-top: -28em;
margin-left: -28em; }
body { background: #000; }
#sun { background: yellow; }
#earth .planet { background: blue; }
And some simple jQuery to get the 3D effect so it looks 2D but moves 3D
$(window).load(function(){
var body = $("body"),
universe = $("#universe"),
solarsys = $("#solar-system");
var init = function() {
body.removeClass('view-2D opening').addClass("view-3D").delay(2000).queue(function() {
$(this).removeClass('hide-UI').addClass("set-speed");
$(this).dequeue();
});
};
init();
});
Here is a DEMO
I think if you use my code you'll probably be better off than fixing yours. Just a suggestion ;)