jquery - 如何在申请下一个类之前等待 css 转换完成-6ren

jquery - 如何在申请下一个类之前等待 css 转换完成

转载作者：技术小花猫更新时间：2023-10-29 10:07:40

25

4

<分区>

我试图让文本“摇摆”，方法是在悬停时以一种方式应用旋转过渡，然后以另一种方式旋转。但是，它不会等待第一个转换完成，因此看起来只应用了最后一个转换。我怎样才能强制它等待第一个转换完成？ 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');
});

25

4

0

文章推荐： ios - OpenCV 自适应阈值 OCR

文章推荐： css - 如何使用 firebug 检查 CSS 伪类？

文章推荐： CSS如何使用伪类:not with :nth-child

文章推荐： css - 在 CSS 字体属性中指定两种尺寸？

等待
我试图让脚本暂停大约 1 秒，然后继续执行脚本，但我似乎无法弄清楚如何做。这是我的代码: function hello() { alert("Hi!") //I need about a 1
java - 等待()/等待(超时)/ sleep (超时)？
wait() 和 wait(timeout) 之间有什么区别。无论如何 wait() 需要等待通知调用，但为什么我们有 wait(timeout)？那么 sleep(timeout) 和 wait(
javascript - 运行PHP，等待；运行 JavaScript，等待；然后提交表格？
我需要做什么: 我有一个带有文件输入和隐藏文本输入的上传表单。用户上传图像，图像被操作，然后发送到远程服务器进行处理，这需要几秒钟，然后远程服务器将最终的图像发送回家庭服务器，并保存在新文件夹中。 J
c++ - 为什么我的 Winsock 应用程序有时在 listen() 等待，有时在 accept() 等待？
大家好，我正在使用 Visual C++ 2010，尝试使用 Winsock 编写服务器/客户端应用程序...我不确定为什么，但有时服务器会在 listen() 函数处等待，有时会在 accept 处
javascript - IE 10 等待 XMLHttpRequest 等待 6 分钟然后响应请求(使用 AngularJS 的 CRSF 实现)
任务描述我为我的 Angular 应用程序实现了 CRSF 保护。服务器检查 crsf token 是否位于请求的 header “X-CSRF-TOKEN”中。如果不是，它会发送一个 HTTP 响
通用循环中的javascript异步/等待
我想做这个例子https://stackoverflow.com/a/33585993/1973680同步。这是正确的实现方式吗？ let times= async (n,f)=>{
Java延迟/等待
我如何将 while 循环延迟到 1 秒间隔，而不会将其运行的整个代码/计算机的速度减慢到一秒延迟(只是一个小循环)。最佳答案 Thread.sleep(1000); // do nothing f
java - 等待，通知来自同步上下文的方法
我知道这是一个重复的问题。但是我无法通过解释来理解。我想用一个很好的例子来清楚地理解它。任何人都可以帮忙吗。 “为什么我们从同步上下文中调用 wait()、notify() 方法”。最佳答案当我们
jquery - 虽然变量未定义 - 等待
我有一个 click 事件，该事件是第一次从另一个地方自动触发的。我的问题是它运行得太快，因为所需的变量仍在由 Flash 和 Web 服务定义。所以现在我有: (function ($) {
javascript - 取消异步/等待
我有如下功能 function async populateInventories(custID){ this.inventories = await this.inventoryServic
javascript - 等待 ".then"解决
我一直对“然后”不被等待的行为感到困扰，我明白其原因。然而，我仍然需要绕过它。这是我的用例。 doWork(family) { return doWork1(family)
dart - 如何在Dart中实现异步/等待
我想我理解异步背后的想法，返回一个Future，但是我不清楚异步在一个非常基本的层面上如何表现。据我了解，它不会自动在程序中创建异步行为。例如: import 'dart:async'; main()
dart - Dart中的异步/等待
我正在制作一个使用异步的Flutter应用程序，但它的工作方式不像我对它的了解。所以我对异步和在 Dart 中等待有一些疑问。这是一个例子: Future someFunction() async {
azure - 等待\依赖于模块中父级中的资源
我在 main.tf 中创建资源组和 vNet，并在同一文件中引用模块。问题是，模块无法从模块访问这些资源。相关代码(删除了大部分代码，只留下相关部分): main.tf: module "worke
javascript - 等待 promise ？
我的代码的问题是，当代码第一次运行时，我试图获取的 dom 元素并不总是存在，如果它不存在，那么永远不会做出 promise 。我是否可以等到 promise 做出后再尝试实现它？我希望我的最后一
javascript - 如何在我的代码中实现回调/等待？
所以，过去几天我一直在研究这段代码，并尝试实现回调/等待/任何需要的东西，但没有成功。问题是，我如何等待响应，直到我得到两个函数的回调？ (以及我将如何实现) 简而言之，我想做的是: POST 发生
java - 调用同步/等待？
谁能帮我理解这一点吗？如果我们有一个类: public class Sample{ public synchronized method1(){ //Line1 .... wait();
java - 等待 - 通知工作？
这是我编写的代码，用于测试 wait() 和 notify() 的工作。现在我有很多疑问。 class A extends Thread { public void run() { try
函数外的javascript变量(使用异步/等待)？
我有以下代码由于语法错误而无法运行(在异步函数外等待) 如何使用 await 定义变量并将其导出？当我这样定义一个变量并从其他文件导入它时，该变量是只创建一次(第一次读取文件时？)还是每次导入时都创
Java 等待/通知全部
一个简单的线程程序，其中写入器将内容放入堆栈，读取器从堆栈中弹出。 java.util.Stack; import java.util.concurrent.ExecutorService; impo

首页

博学

6Ren·AI

商城

jquery - 如何在申请下一个类之前等待 css 转换完成