<分区>
我试图让文本“摇摆”，方法是在悬停时以一种方式应用旋转过渡，然后以另一种方式旋转。但是，它不会等待第一个转换完成，因此看起来只应用了最后一个转换。我怎样才能强制它等待第一个转换完成？ JSfiddle:http://jsfiddle.net/hari_shanx/VRTAf/7/
HTML:
<div id="chandelier">
<nav>
<ul id="chandelier-list">
<li id="logo-home" class="swing"><a href="#home" class="scrollPage">home</a>
</li>
<li id="logo-about" class="swing"><a href="#about" class="scrollPage">about us</a>
</li>
<li id="logo-range" class="swing"><a href="#range" class="scrollPage">our range</a>
</li>
<li id="logo-contact" class="swing"><a href="#contact" class="scrollPage">contact us</a>
</li>
<li id="logo-blog" class="swing"><a href="#blog" class="scrollPage">blog</a>
</li>
</ul>
</nav>
</div>
CSS:
.swing {
position: absolute;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
writing-mode: lr-tb;
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
font-size: 18px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.swing1 {
-webkit-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
-o-transform: rotate(-80deg);
transform: rotate(-80deg);
}
.swing2 {
-webkit-transform: rotate(-97deg);
-moz-transform: rotate(-97deg);
-o-transform: rotate(-97deg);
transform: rotate(-97deg);
}
.swing3 {
-webkit-transform: rotate(-85deg);
-moz-transform: rotate(-85deg);
-o-transform: rotate(-85deg);
transform: rotate(-85deg);
}
.swing4 {
-webkit-transform: rotate(-92deg);
-moz-transform: rotate(-92deg);
-o-transform: rotate(-92deg);
transform: rotate(-92deg);
}
.swing5 {
-webkit-transform: rotate(-89deg);
-moz-transform: rotate(-89deg);
-o-transform: rotate(-89deg);
transform: rotate(-89deg);
}
#logo-home {
top: 0;
left: -32px;
}
#logo-about {
top: 0;
left: -17px;
}
#logo-range {
top: 0;
left: 14px;
}
#logo-contact {
top: 0;
left: 48px;
}
#logo-blog {
top: 0;
left: 135px;
}
#chandelier nav ul li a {
text-decoration: none;
}
#chandelier nav ul {
list-style-type: none;
}
JS:
$('.swing').hover(
function () {
$(this).addClass('swing1');
$(this).addClass('swing2');
},
function () {
$(this).removeClass('swing1');
$(this).removeClass('swing2');
});