&引用；“摇摆”；使用css和jquery对文本执行操作

我试图模仿文本“悬挂”在一个横杆上，在悬停时摆动。下面是我目前获得的代码的JSFIDLE:。如您所见，悬停时的旋转没有变化。我做错了什么

这是我的密码

HTML:

JS:

---

您没有包含指向jsfiddle:）Opps的链接，抱歉。现在刚刚添加了它。这就是你想要的吗？这比我的要好得多（即，它在悬停时实际上会旋转），但我试图让它来回摆动。在你的例子中，它似乎只是在表演“swing2”-也许我必须在两者之间设置一个延迟。@Babbagei:是的，这是一种方式。但是，如果您只针对现代浏览器（支持CSS3动画的浏览器），我建议您使用

关键帧

。回到问题上来，我仍然想知道如何将吊灯nav ul li更改为

。swing

有效：P

<div id="chandelier">
                <nav>
                    <ul id="chandelier-list">
                        <li id="logo-home"><a href="#home" class="scrollPage">home</a></li>
                        <li id="logo-about"><a href="#about" class="scrollPage">about us</a></li>
                        <li id="logo-range"><a href="#range" class="scrollPage">our range</a></li>
                        <li id="logo-contact"><a href="#contact" class="scrollPage">contact us</a></li>
                        <li id="logo-blog"><a href="#blog" class="scrollPage">blog</a></li>
                    </ul>
                </nav>
            </div>

#chandelier nav ul li {
    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;
}

$('#chandelier nav ul li').hover(
function () {
    $(this).addClass('swing1');
    $(this).addClass('swing2');
    $(this).addClass('swing3');
    $(this).addClass('swing4');
    $(this).addClass('swing5');
},
function () {
    $(this).removeClass('swing5');
}
);